杜十菇凉
<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> <div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖最后由 马黑黑 于 2025-3-23 12:22 编辑
range_player.js 是通过 Chrome、Firefox 私有属性改写 HTML5 input 控件UI的播放器模块，LRC歌词版敬请期待。说一下用法：
CSS资源引用：参考代码第 2 行；
CSS配色：和前几个模块的做法差不多，不过CSS变量更少、定义也有所不同，--track 和 --prog，主要用于进度条滑块、按钮，综合应用。#mplayer { ... } 可以设置宽度，width: 480px; 或 width: 80%; 都行。
JS模块引用：参考代码第 14 行。同时留意一下 13 行代码的 type 属性；
配置 hcplay 参数：极简，仅需要一个参数，该参数指向帖子容器，即帖子容器标签代码中 id="啥啥啥" 小角引号里面是啥就是啥。
另：细心的小盆友可能已经发现，播放器控制按钮会变色。变不变色取决于CSS变量 --track 的颜色设置，凡 黑、灰、白 的颜色都不会变色，不是这几样颜色的就会变色。
这个十娘的小播长得这么漂亮。。。。跟金银珠宝似的。{:4_170:} 惨兮兮的菇凉，
自己辣么多钱还为了一渣男跳河了。。{:4_170:}
想不开真要命 花飞飞 发表于 2025-3-23 12:14
这个十娘的小播长得这么漂亮。。。。跟金银珠宝似的。
捡 花飞飞 发表于 2025-3-23 12:16
惨兮兮的菇凉，
自己辣么多钱还为了一渣男跳河了。。
想不开真要命
都说爱情无脑{:4_170:} 这小播暂停键加了个菱形装饰框，滑块跟珠子似的。。。
两个颜色都很高级，也有立体感，想伸手碰一碰。。{:4_173:}
给装饰框变色效果，跟它自己会发光一样，好灵动 同样支持键盘操作暂停播放及全屏，这个超方便。。{:4_187:} 花飞飞 发表于 2025-3-23 12:25
这小播暂停键加了个菱形装饰框，滑块跟珠子似的。。。
两个颜色都很高级，也有立体感，想伸手碰一碰。。{: ...
那个装饰框深层里其实是主框 花飞飞 发表于 2025-3-23 12:26
同样支持键盘操作暂停播放及全屏，这个超方便。。
{:4_191:} 再说一句，这姓杜的菇凉，明朝时你坚贞，把感情看得比命还重。。
另一个男的把你这蠢事编上了警世通言了。。
来世再投胎，可不能再恋爱脑。。万事拎不清{:4_173:} 马黑黑 发表于 2025-3-23 12:26
那个装饰框深层里其实是主框
意思它跟播放和暂停是一体的。。这个设计得一万分 花飞飞 发表于 2025-3-23 12:31
再说一句，这姓杜的菇凉，明朝时你坚贞，把感情看得比命还重。。
另一个男的把你这蠢事编上了警世通言了。 ...
{:4_172:} 马黑黑 发表于 2025-3-23 12:22
捡
大的归你。。。小的归我。。{:4_170:} 花飞飞 发表于 2025-3-23 12:32
意思它跟播放和暂停是一体的。。这个设计得一万分
太多了，给十分就满意了{:4_170:} 马黑黑 发表于 2025-3-23 12:22
都说爱情无脑
这事儿是做梦的那个男人编的。。{:4_173:} 花飞飞 发表于 2025-3-23 12:32
大的归你。。。小的归我。。
说定了 花飞飞 发表于 2025-3-23 12:34
这事儿是做梦的那个男人编的。。
无论男女，现实如此 马黑黑 发表于 2025-3-23 12:32
{:4_173:}是不是特无语，编的人太夸张