湖光山色

马黑黑

马黑黑

帖子代码

<style>
#papa {
	margin: 30px 0 30px calc(50% - 721px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/webp2/hgus.webp') no-repeat center/cover;
	box-shadow: 3px 3px 20px #000;
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
}
#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/2629112/00/02/03/5b4f2ae929323.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: `
			bottom: 10px;
			background: none;
			border: thick double lightgreen;
			color: white;
			--ww: 300px;
			--hh: 140px;
			--track: green;
			--prog: lightgreen;
		`,
		fs_css: 'top: 20px;',
	});
};
var music_ar = [
	['222637/2024/08/28/c3464afc51d696721c5ed8085837f32f.mp3', '碧水微风媚太湖'],
	['222632/2024/08/28/2679435327c3ba30f1d990dc0e4cf7ed.mp3', '佛光山水普陀山'],
	['222634/2024/08/28/5142066a9d0dfbab7fe9bac130330fd6.mp3', '天水一色青海湖'],
	['222636/2024/08/28/975bb85a12e5471d3d8a7ffaae08b23a.mp3', '天籁天音绕天山'],
	['222638/2024/08/28/dc3ba38d18328297328dffa5998fe065.mp3', '水天浩渺洞庭湖'],
	['222639/2024/08/28/28fce04e4dbc71b738b32d71bff67c83.mp3', '银河烟雨挂庐山'],
	['222640/2024/08/28/02f3d2fb77b2c667f14ecaf5d1a6b5c9.mp3', '云门七彩峨眉山'],
	['222631/2024/08/28/b23b15f1a9ed1ccb8bcc31d77cabe772.mp3', '诗韵悠悠秀漓江'],
	['222641/2024/08/28/1cb244a9bc6b096ebaf9ab0bba9fb479.mp3', '清音玉露月牙泉'],
	['222635/2024/08/28/7a5f7863c3103d66c8243f6b61258b18.mp3', '雅鲁藏布江'],
	['222633/2024/08/28/715e39bd4faaaa17bb8a88a532dcd359.mp3', '云海清泉奇黄山'],
].map(item => {
	item[0] = 'https://www.kumeiwp.com/wj/' + item[0];
	return item;
});
</script>

马黑黑

插件文档：mplayer插件配置及使用说明 (52qingyin.cn)

马黑黑

前天，@小辣椒 问及 mplayer 透明度的问题，昨天 @绿叶清舟 也谈论到此事。这里一并答复。

有两种方式设置播放器透明度，在配置中的 player_css 参数中完成，使用标准CSS语句：

① 使用 opacity 或 filter: opaciy，界面和按钮等均会按所设透明度呈现透明，以前者为例：

        opacity: .5;

② 通过 background 属性设置全背景透明但按钮文字等不透明：

        background: none;

第二种方法应重设 border 边框属性修饰界面，详情请参考本帖代码 42、43 行。

彩云归

播放器越发完善！

冬天的雨

马老师出多歌曲播放器了

冬天的雨

马老师技术越来越精湛了

马黑黑

冬天的雨 发表于 2024-9-1 11:06
马老师技术越来越精湛了

马黑黑

醉美水芙蓉 发表于 2024-9-1 09:10
呀！老师做得还是专辑，辛苦了！

马黑黑

彩云归 发表于 2024-9-1 08:33
播放器越发完善！

梦江南

没分了。

梦江南

音乐播放器，听歌过瘾。老师辛苦了！

小辣椒

黑黑这个播放器背景是透明的了

小辣椒

这样挺漂亮的，昨天晚上到今天上午一直没有修改完善，心里也是在想用透明背景，我想把按钮和进度条都平行的，包括列表按钮和上面的小圆转盘，没有修改成功。

小辣椒

下午没有时间了，想出去购物的，看起来今天做不好了

绿叶清舟

这么快出来了啊，发现一个问题这里音乐用的相对地址，换成网易的不知道行不行了

马黑黑

绿叶清舟 发表于 2024-9-1 14:17
这么快出来了啊，发现一个问题这里音乐用的相对地址，换成网易的不知道行不行了

这只是声明数组和赋值的问题，你不愿意像帖子这样做的话，就按 http://mhh.52qingyin.cn/art/show ... rt=mahei_1725148641 里面说的做就好。

马黑黑

小辣椒 发表于 2024-9-1 14:10
这样挺漂亮的，昨天晚上到今天上午一直没有修改完善，心里也是在想用透明背景，我想把按钮和进度条都平行的 ...

透明按上面我说的做就是完全透明了，这是帖子配置的问题。至于按钮、进度条的布局，这是个小事情，不过这不是做帖时的配置问题，这需要修改源代码中 ① CSS文档 ② JS中的 HTML字串，二者匹配就行。