湖光山色
<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 = 'https://www.kumeiwp.com/wj/' + item;
return item;
});
</script>
<h2>帖子代码</h2>
<div class="hE"><pre>
<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 = 'https://www.kumeiwp.com/wj/' + item;
return item;
});
</script>
</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>
插件文档：mplayer插件配置及使用说明 (52qingyin.cn)
前天，@小辣椒 问及 mplayer 透明度的问题，昨天 @绿叶清舟 也谈论到此事。这里一并答复。
有两种方式设置播放器透明度，在配置中的 player_css 参数中完成，使用标准CSS语句：
① 使用 opacity 或 filter: opaciy，界面和按钮等均会按所设透明度呈现透明，以前者为例：
opacity: .5;
② 通过 background 属性设置全背景透明但按钮文字等不透明：
background: none;
第二种方法应重设 border 边框属性修饰界面，详情请参考本帖代码 42、43 行。 播放器越发完善！ 马老师出多歌曲播放器了{:4_199:} 马老师技术越来越精湛了{:4_178:} 冬天的雨 发表于 2024-9-1 11:06
马老师技术越来越精湛了
{:4_203:} 醉美水芙蓉 发表于 2024-9-1 09:10
呀！老师做得还是专辑，辛苦了！
{:4_190:} 彩云归 发表于 2024-9-1 08:33
播放器越发完善！
{:4_180:} 没分了。{:4_201:} 音乐播放器，听歌过瘾。老师辛苦了！ 黑黑这个播放器背景是透明的了{:4_199:} 这样挺漂亮的，昨天晚上到今天上午一直没有修改完善，心里也是在想用透明背景，我想把按钮和进度条都平行的，包括列表按钮和上面的小圆转盘，没有修改成功。{:4_198:} 下午没有时间了，想出去购物的，看起来今天做不好了 这么快出来了啊，发现一个问题这里音乐用的相对地址，换成网易的不知道行不行了 绿叶清舟 发表于 2024-9-1 14:17
这么快出来了啊，发现一个问题这里音乐用的相对地址，换成网易的不知道行不行了
这只是声明数组和赋值的问题，你不愿意像帖子这样做的话，就按 http://mhh.52qingyin.cn/art/show.php?st=2&sd=2&art=mahei_1725148641 里面说的做就好。 小辣椒 发表于 2024-9-1 14:10
这样挺漂亮的，昨天晚上到今天上午一直没有修改完善，心里也是在想用透明背景，我想把按钮和进度条都平行的 ...
透明按上面我说的做就是完全透明了，这是帖子配置的问题。至于按钮、进度条的布局，这是个小事情，不过这不是做帖时的配置问题，这需要修改源代码中 ① CSS文档 ② JS中的 HTML字串，二者匹配就行。