问情（顺祝冬至快乐）
<style>#papa { margin: 0 0 0 calc(50% - 612px); width: 1063px; height: 700px; box-shadow: 3px 3px 20px #000; background: url('https://638183.freep.cn/638183/t23/webp2/wfqk.webp') no-repeat center/cover; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
#papa video { position: absolute; width: 100%; height: 760px; top: -60px; opacity: .95; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca9303ecc7.mp4" autoplay loop muted></video>
</div>
<script>
(function() {
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let player = new ypP();
player.setAudSrc('https://music.163.com/song/media/outer/url?id=1481922620');
player.setBtnCss(`
width: 300px;
bottom: 10px;
--btnBg: url('https://638183.freep.cn/638183/t22/btn/g4.png') no-repeat center/cover;
--trackBg: transparent;
--progBg: #ae6556;
--btnSize: 50px;
`);
player.setLrcCss('top: 15px; color: #E6E9E6; --bg: #ae6c5b;');
player.lrcAr = [ , , , , , , , , , , , , , , , , , , , , ];
};
})();
</script>
【附】帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 612px); width: 1063px; height: 700px; box-shadow: 3px 3px 20px #000; background: url('https://638183.freep.cn/638183/t23/webp2/wfqk.webp') no-repeat center/cover; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
#papa video { position: absolute; width: 100%; height: 760px; top: -60px; opacity: .95; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca9303ecc7.mp4" autoplay loop muted></video>
</div>
<script>
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let player = new ypP();
player.setAudSrc('https://music.163.com/song/media/outer/url?id=1481922620');
player.setBtnCss(`
width: 300px;
bottom: 10px;
--btnBg: url('https://638183.freep.cn/638183/t22/btn/g4.png') no-repeat center/cover;
--trackBg: transparent;
--progBg: #ae6556;
--btnSize: 50px;
`);
player.setLrcCss('top: 15px; color: #E6E9E6; --bg: #ae6c5b;');
player.lrcAr = [ , , , , , , , , , , , , , , , , , , , , ];
};
</script>
本帖最后由 马黑黑 于 2023-12-22 16:41 编辑
ypPlayer 插件地址：https://638183.freep.cn/638183/web/api/ypPlayer.min.js
插件引用及配置方法请参照 第11~29行。下面谈谈插件的参数配置——
lrcAr 参数属于属性值配置，所以用等号，其余几个参数属于方法配置，配置代码写成 xx.参数名(CSS代码) ，括号内的CSS代码请用CSS属性表达规范进行配置。其中：
xx.setAudSrc : 配置音频地址，仅支持单个音频；
xx.setBtnCss : 音频播放控制器配置，属性 width 是整改控制器的长度，属性 height 缺省为 10px；属性 left/right/top/bottom 用于定位；变量 --btnSize 是按钮尺寸，缺省时是 40px；变量 --btnBg 是按钮背景图片；--trackBg 是进度条底色，--progBg 是进度条进度颜色（支持渐变）；
xx.setLrcCss : 配置lrc同步歌词，支持CSS四个方向的定位属性、字体及字体大小和颜色等；例中，属性 color 用于设置歌词底色，--bg 变量用于设置歌词同步颜色（实际上是元素的背景色，支持渐变与图片）。
上面，xx 为你声明的实例化 ypP 的自定义变量变量，例如本帖定义为 player，就用 player 取代 xx 即可。
另外，如果方法配置中需要分行写（例如本帖的 player.setBtnCss() 方法，由于JS规定小角单、双引号不能分行，请用反引号将小角括号里的内容包裹起来。 人间小团圆，冬至大如年，恭祝朋友冬安！ 好漂亮的制作。欣赏黑黑好帖{:4_199:} https://5b0988e595225.cdn.sohucs.com/images/20191222/c387c68613704c269298634c778172dd.jpeg 起个网名好难 发表于 2023-12-22 17:02
感谢，同祝 梦油 发表于 2023-12-22 16:48
人间小团圆，冬至大如年，恭祝朋友冬安！
节日好。
我们这里说冬至大过年 红影 发表于 2023-12-22 17:00
好漂亮的制作。欣赏黑黑好帖
有点温馨的感觉，刚好可以抵御寒冬{:4_170:} 欣赏黑黑老师精美帖子！冬至快乐！{:4_190:} 马黑黑 发表于 2023-12-22 17:03
节日好。
我们这里说冬至大过年
是的，我们这里也是说春节算大年。 梦油 发表于 2023-12-22 17:24
是的，我们这里也是说春节算大年。
很多地方都很重视冬至 醉美水芙蓉 发表于 2023-12-22 17:19
粒子成心型状，好漂亮！歌曲经典好听！谢谢黑黑老师分享新作品！
{:4_190:} 这个好，带进度哒。那颗心也好漂亮吖{:6_228:} 幸运草 发表于 2023-12-22 17:46
这个好，带进度哒。那颗心也好漂亮吖
节日好 马黑黑 发表于 2023-12-22 18:08
节日好
谢谢，因为冬至，那颗心才做成雪花哒{:6_221:} 幸运草 发表于 2023-12-22 19:08
谢谢，因为冬至，那颗心才做成雪花哒
这也看得出来{:4_170:} 亦是金 发表于 2023-12-22 17:18
欣赏黑黑老师精美帖子！冬至快乐！
同乐同乐 谢谢马老师这一年的辛苦，在这里我学到了很多，也快乐了很多。祝马老师节日快乐{:4_191:}