变奏的梦想（精选集）

马黑黑

马黑黑

帖子代码

<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>

马黑黑

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:48
好美呀，非常大气的制作

马黑黑

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

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

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

红影

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

红影

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

红影

背景制作和视频效果也特别好。漂亮

马黑黑

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

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

马黑黑

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

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

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

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

朵拉

精彩制作，欣赏学习

彩云归

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

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

两个问题完美解决！

马黑黑

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

马黑黑

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

红影

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

嗯嗯，曲名可以游走也很漂亮

红影

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

例如，mplayer.html 保 ...

这个还可以听本地歌曲，真太好了