杜十菇凉

马黑黑

马黑黑

<style>
@import 'https://638183.freep.cn/638183/web/ku/range_player.css';
#papa { margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/dsn.webp') no-repeat center/cover; border-radius: 8px; overflow: hidden; }
#mplayer { --track: tan; --prog: purple; bottom: 20px; width: 50%; }
#fsbtn { top: 20px; right: 20px; }
</style>

<div id="papa" class="pa">
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/08/05/36/video6365a8d06c60e.mp4" autoplay loop muted></video>
	<audio src="https://music.163.com/song/media/outer/url?id=25931270" autoplay loop></audio>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/ku/range_player.js';
	hcplay(papa);
</script>

马黑黑

range_player.js 是通过 Chrome、Firefox 私有属性改写 HTML5 input[type=range] 控件UI的播放器模块，LRC歌词版敬请期待。说一下用法：

CSS资源引用：参考代码第 2 行；

CSS配色：和前几个模块的做法差不多，不过CSS变量更少、定义也有所不同，--track 和 --prog，主要用于进度条滑块、按钮，综合应用。#mplayer { ... } 可以设置宽度，width: 480px; 或 width: 80%; 都行。

JS模块引用：参考代码第 14 行。同时留意一下 13 行代码的 type 属性；

配置 hcplay 参数：极简，仅需要一个参数，该参数指向帖子容器，即帖子容器标签代码中 id="啥啥啥" 小角引号里面是啥就是啥。

另：细心的小盆友可能已经发现，播放器控制按钮会变色。变不变色取决于CSS变量 --track 的颜色设置，凡 黑、灰、白 的颜色都不会变色，不是这几样颜色的就会变色。

花飞飞

这个十娘的小播长得这么漂亮。。。。跟金银珠宝似的。

花飞飞

惨兮兮的菇凉，
自己辣么多钱还为了一渣男跳河了。。
想不开真要命

马黑黑

花飞飞 发表于 2025-3-23 12:14
这个十娘的小播长得这么漂亮。。。。跟金银珠宝似的。

捡

马黑黑

花飞飞 发表于 2025-3-23 12:16
惨兮兮的菇凉，
自己辣么多钱还为了一渣男跳河了。。
想不开真要命

都说爱情无脑

花飞飞

这小播暂停键加了个菱形装饰框，滑块跟珠子似的。。。
两个颜色都很高级，也有立体感，想伸手碰一碰。。
给装饰框变色效果，跟它自己会发光一样，好灵动

花飞飞

同样支持键盘操作暂停播放及全屏，这个超方便。。

马黑黑

花飞飞 发表于 2025-3-23 12:25
这小播暂停键加了个菱形装饰框，滑块跟珠子似的。。。
两个颜色都很高级，也有立体感，想伸手碰一碰。。{: ...

那个装饰框深层里其实是主框

马黑黑

花飞飞 发表于 2025-3-23 12:26
同样支持键盘操作暂停播放及全屏，这个超方便。。

花飞飞

再说一句，这姓杜的菇凉，明朝时你坚贞，把感情看得比命还重。。
另一个男的把你这蠢事编上了警世通言了。。
来世再投胎，可不能再恋爱脑。。万事拎不清

花飞飞

马黑黑 发表于 2025-3-23 12:26
那个装饰框深层里其实是主框

意思它跟播放和暂停是一体的。。这个设计得一万分

马黑黑

花飞飞 发表于 2025-3-23 12:31
再说一句，这姓杜的菇凉，明朝时你坚贞，把感情看得比命还重。。
另一个男的把你这蠢事编上了警世通言了。 ...

花飞飞

马黑黑 发表于 2025-3-23 12:22
捡

大的归你。。。小的归我。。

马黑黑

花飞飞 发表于 2025-3-23 12:32
意思它跟播放和暂停是一体的。。这个设计得一万分

太多了，给十分就满意了

花飞飞

马黑黑 发表于 2025-3-23 12:22
都说爱情无脑

这事儿是做梦的那个男人编的。。

马黑黑

花飞飞 发表于 2025-3-23 12:32
大的归你。。。小的归我。。

说定了

马黑黑

花飞飞 发表于 2025-3-23 12:34
这事儿是做梦的那个男人编的。。

无论男女，现实如此

花飞飞

马黑黑 发表于 2025-3-23 12:32

是不是特无语，编的人太夸张