问情（顺祝冬至快乐）

马黑黑

马黑黑

【附】帖子代码

1. <style>
   
2. #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; }
   
3. #papa video { position: absolute; width: 100%; height: 760px; top: -60px; opacity: .95; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
   
4. </style>
   
5. 
   
6. <div id="papa">
   
7.         <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca9303ecc7.mp4" autoplay loop muted></video>
   
8. </div>
   
9. 
   
10. <script>
    
11. let sf = document.createElement('script');
    
12. sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
    
13. sf.charset = 'utf-8';
    
14. document.body.appendChild(sf);
    
15. 
    
16. sf.onload = () => {
    
17.         let player = new ypP();
    
18.         player.setAudSrc('https://music.163.com/song/media/outer/url?id=1481922620');
    
19.         player.setBtnCss(`
    
20.                 width: 300px;
    
21.                 bottom: 10px;
    
22.                 --btnBg: url('https://638183.freep.cn/638183/t22/btn/g4.png') no-repeat center/cover;
    
23.                 --trackBg: transparent;
    
24.                 --progBg: #ae6556;
    
25.                 --btnSize: 50px;
    
26.         `);
    
27.         player.setLrcCss('top: 15px; color: #E6E9E6; --bg: #ae6c5b;');
    
28.         player.lrcAr = [ [3,"黄龄 - 问情",10], [33.22,"山川载不动太多悲哀",5.3], [39.32,"岁月禁不起太长的等待",5.2], [45.28,"春花最爱向风中摇摆",5.6], [51.43,"黄沙偏要将痴和怨掩埋",5.1], [57.30,"一世的聪明 情愿糊涂",5.3], [63.22,"一生的遭遇 向谁诉",6.1], [69.67,"爱到不能爱 聚到终须散",5.8], [75.68,"繁华过后成一梦啊",5.1], [81.69,"海水永不干 天也望不穿",6.0], [87.78,"红尘一笑和你共徘徊",6.0], [105.86,"一世的聪明 情愿糊涂",5.0], [111.63,"一生的遭遇 向谁诉",5.0], [118.02,"爱到不能爱 聚到终须散",5.2], [124.12,"繁华过后成一梦啊",5.2], [130.1,"海水永不干 天也望不穿",5.2], [136.23,"红尘一笑和你共徘徊",5.8], [142.24,"爱到不能爱 聚到终须散",5.8], [148.32,"繁华过后成一梦啊",5.5], [154.32,"海水永不干 天也望不穿",5.9], [160.38,"红尘一笑和你共徘徊",7] ];
    
29. };
    
30. </script>

复制代码

马黑黑

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规定小角单、双引号不能分行，请用反引号将小角括号里的内容包裹起来。

梦油

人间小团圆，冬至大如年，恭祝朋友冬安！

红影

好漂亮的制作。欣赏黑黑好帖

起个网名好难

                               
登录/注册后可看大图

马黑黑

起个网名好难 发表于 2023-12-22 17:02

感谢，同祝

马黑黑

梦油 发表于 2023-12-22 16:48
人间小团圆，冬至大如年，恭祝朋友冬安！

节日好。
我们这里说冬至大过年

马黑黑

红影 发表于 2023-12-22 17:00
好漂亮的制作。欣赏黑黑好帖

有点温馨的感觉，刚好可以抵御寒冬

亦是金

欣赏黑黑老师精美帖子！冬至快乐！

梦油

马黑黑 发表于 2023-12-22 17:03
节日好。
我们这里说冬至大过年

是的，我们这里也是说春节算大年。

马黑黑

梦油 发表于 2023-12-22 17:24
是的，我们这里也是说春节算大年。

很多地方都很重视冬至

马黑黑

醉美水芙蓉 发表于 2023-12-22 17:19
粒子成心型状，好漂亮！歌曲经典好听！谢谢黑黑老师分享新作品！

幸运草

这个好，带进度哒。那颗心也好漂亮吖

马黑黑

幸运草 发表于 2023-12-22 17:46
这个好，带进度哒。那颗心也好漂亮吖

节日好

幸运草

马黑黑 发表于 2023-12-22 18:08
节日好

谢谢，因为冬至，那颗心才做成雪花哒

马黑黑

幸运草 发表于 2023-12-22 19:08
谢谢，因为冬至，那颗心才做成雪花哒

这也看得出来

马黑黑

亦是金 发表于 2023-12-22 17:18
欣赏黑黑老师精美帖子！冬至快乐！

同乐同乐

非常开心

谢谢马老师这一年的辛苦，在这里我学到了很多，也快乐了很多。祝马老师节日快乐