马黑黑 发表于 2024-8-30 08:04

变奏的梦想（精选集）

<style>
#papa {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp2/bmzz.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#papa > video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        transform: rotateX(180deg);
        pointer-events: none;
}
</style>

<div id="papa">
        <video src="https://img.tukuppt.com/video_show/15653652/01/25/51/62417a197d205.mp4" autoplay loop muted></video>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/mplayer.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#papa',
                musics: music_ar,
                title: '变奏的梦想',
                player_css: 'right: 10px; bottom: 10px; background: linear-gradient(black,teal); --ww: 320px; --hh: 140px;',
                fs_css: 'left: 20px; bottom: 20px;',
        });
};

var music_ar = [
        ['https://music.163.com/song/media/outer/url?id=1405147433', '山涧月'],
        ['https://music.163.com/song/media/outer/url?id=32743519', '江上清风游'],
        ['https://music.163.com/song/media/outer/url?id=32743520', '淮古遗殇'],
        ['https://music.163.com/song/media/outer/url?id=1441213877', '浩浩呼如冯虚御风'],
        ['https://music.163.com/song/media/outer/url?id=532418726', '花未期'],
        ['https://music.163.com/song/media/outer/url?id=32743521', '明月逐人归'],
        ['https://music.163.com/song/media/outer/url?id=450572105', '雪满弓'],
        ['https://music.163.com/song/media/outer/url?id=1476791664', '苏州·千里烟波'],
];
</script>

马黑黑 发表于 2024-8-30 08:05

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#papa {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/webp2/bmzz.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#papa &gt; video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        transform: rotateX(180deg);
        pointer-events: none;
}
&lt;/style&gt;

&lt;div id="papa"&gt;
        &lt;video src="https://img.tukuppt.com/video_show/15653652/01/25/51/62417a197d205.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/mplayer.js';
document.body.appendChild(sf);

sf.onload = () =&gt; {
        HCPlayer({
                papa: '#papa',
                musics: music_ar,
                title: '变奏的梦想',
                player_css: 'right: 10px; bottom: 10px; background: linear-gradient(black,teal); --ww: 320px; --hh: 140px;',
                fs_css: 'left: 20px; bottom: 20px;',
        });
};

var music_ar = [
        ['https://music.163.com/song/media/outer/url?id=1405147433', '山涧月'],
        ['https://music.163.com/song/media/outer/url?id=32743519', '江上清风游'],
        ['https://music.163.com/song/media/outer/url?id=32743520', '淮古遗殇'],
        ['https://music.163.com/song/media/outer/url?id=1441213877', '浩浩呼如冯虚御风'],
        ['https://music.163.com/song/media/outer/url?id=532418726', '花未期'],
        ['https://music.163.com/song/media/outer/url?id=32743521', '明月逐人归'],
        ['https://music.163.com/song/media/outer/url?id=450572105', '雪满弓'],
        ['https://music.163.com/song/media/outer/url?id=1476791664', '苏州·千里烟波'],
];
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-8-30 08:19

mplayer插件配置要点：

papa: 指定帖子容器选择器，比如帖子 id="papa"，则设置为 papa: '#papa', ，class="papa", ，则设置为 papa: '.papa', ；musics: 指定音乐数组变量名，需要在配置代码之外声明一个数组变量，并将歌曲地址、歌名信息组织起来（参照代码43~51行）；
title: 集子的名称，会显示在播放器的标题栏；
player_css: 播放器CSS设置，可以通过两个css变量 --ww 和 --hh 设置播放器的尺寸，还能通过常规CSS属性设置播放器背景、在帖子中的定位等。插件设计了一个样式，配置中如果没有 background 属性设置则使用该样式。播放器背景支持渐变、图片，但由于不开放前景色、按钮和进度条颜色的设置功能，使用自定义背景时应考虑该背景应能和文本、按钮和进度条相协调；
fs_css: 全屏按钮CSS设置，仅背景色、前景色和具体定位等属性，可以只设置部分属性。

梦江南 发表于 2024-8-30 09:21

早上好！老师的这款歌曲播放器漂亮。

彩云归 发表于 2024-8-30 10:41

漂亮的多曲播放器，谢谢分享！
请教：
点击歌曲菜单中的歌曲名称，无法选择歌曲？
"正在随机循环"点击后，按钮消失，进入单曲循环播放方式。如要再恢复“随机循环”如何操作？

茉莉 发表于 2024-8-30 10:48

好美呀，非常大气的制作

马黑黑 发表于 2024-8-30 14:02

梦江南 发表于 2024-8-30 09:21
早上好！老师的这款歌曲播放器漂亮。

感谢支持

马黑黑 发表于 2024-8-30 14:02

茉莉 发表于 2024-8-30 10:48
好美呀，非常大气的制作

{:4_190:}

马黑黑 发表于 2024-8-30 14:04

彩云归 发表于 2024-8-30 10:41
漂亮的多曲播放器，谢谢分享！
请教：
点击歌曲菜单中的歌曲名称，无法选择歌曲？


插件处于测试阶段，一些细节还能没完善。

你发现的两个问题，现已做修正处理，需要在本帖第一页按 ctr+F5 硬刷新一次以更新页面中的js插件，不行在软刷新一次就可以了。

红影 发表于 2024-8-30 14:11

非常漂亮的多歌曲播放器，有那么多按钮可选，可以前进和后退一个曲子，还可以在列表中选择。
播放方式还有单曲重复和乱序播放。
这个太棒了{:4_199:}

红影 发表于 2024-8-30 14:13

封装后只要设置想要的歌曲就好。想听多首曲子时，这个太适用了。{:4_199:}

红影 发表于 2024-8-30 14:14

背景制作和视频效果也特别好。漂亮{:4_199:}

马黑黑 发表于 2024-8-30 14:15

红影 发表于 2024-8-30 14:11
非常漂亮的多歌曲播放器，有那么多按钮可选，可以前进和后退一个曲子，还可以在列表中选择。
播放方式还有 ...

中间文字游走是 @小辣椒 最喜欢的吧？小辣椒以前用 marquee 实现，可惜这个属性跟 IE 一起被埋葬了

马黑黑 发表于 2024-8-30 14:20

红影 发表于 2024-8-30 14:13
封装后只要设置想要的歌曲就好。想听多首曲子时，这个太适用了。

可以将代码存为本地HTML文档，听自己硬盘上的歌曲，当然要制作好本地歌曲库。

例如，mplayer.html 保存在 d:\music 下面，则：

var music_ar = [
    ['茉莉花.mp3', '茉莉花'],
    ['meihua.mp3', '红梅赞'],
    ['./2024/qidao.mp3', '祈祷'],
];

朵拉 发表于 2024-8-30 14:49

精彩制作，欣赏学习{:4_178:}

彩云归 发表于 2024-8-30 15:52

马黑黑 发表于 2024-8-30 14:04
插件处于测试阶段，一些细节还能没完善。

你发现的两个问题，现已做修正处理，需要在本帖第一页按 ctr ...

两个问题完美解决！

马黑黑 发表于 2024-8-30 18:20

彩云归 发表于 2024-8-30 15:52
两个问题完美解决！

{:4_190:}

马黑黑 发表于 2024-8-30 18:21

朵拉 发表于 2024-8-30 14:49
精彩制作，欣赏学习

{:4_190:}

红影 发表于 2024-8-30 20:21

马黑黑 发表于 2024-8-30 14:15
中间文字游走是 @小辣椒 最喜欢的吧？小辣椒以前用 marquee 实现，可惜这个属性跟 IE 一起被埋葬了

嗯嗯，曲名可以游走也很漂亮{:4_187:}

红影 发表于 2024-8-30 20:22

马黑黑 发表于 2024-8-30 14:20
可以将代码存为本地HTML文档，听自己硬盘上的歌曲，当然要制作好本地歌曲库。

例如，mplayer.html 保 ...

这个还可以听本地歌曲，真太好了{:4_199:}
页: [1] 2 3
查看完整版本: 变奏的梦想（精选集）