烟雨
<style>@import 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.css';
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/5/yjyu.jpg') no-repeat center/cover; }
#mplayer { --tx: 0; --ppNum: 35; --ppBg: null; --ppLen: 3px; --ppCap: #ddd; --prog: red; --track: silver; bottom: 80px; color: lightgreen; }
#fsbtn { bottom: 20px; color: white; border-color: white; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1837799288"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/07/19/09/58/29/video6699c8452db90.mp4" autoplay loop muted></video>
<!--div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div-->
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
hcplay(tz);
fscreen.fs(tz, fsbtn);
</script>
<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.css';
#tz { margin: 30px 0 30px calc(50% - 641px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/5/yjyu.jpg') no-repeat center/cover; }
#mplayer { --tx: 0; --ppNum: 35; --ppBg: null; --ppLen: 3px; --ppCap: #ddd; --prog: red; --track: silver; bottom: 80px; color: lightgreen; }
#fsbtn { bottom: 20px; color: white; border-color: white; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1837799288"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/07/19/09/58/29/video6699c8452db90.mp4" autoplay loop muted></video>
<!--div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div-->
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/ccpp_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
hcplay(tz);
fscreen.fs(tz, fsbtn);
</script>
</pre></div>
<p>【注意】播放器的尺寸虽未锁定，但频谱绕圈的计算锁定，所以，即使通过改变 #mplayer 的 width 和 height 也将无济于事，仅进度条会改变长短。关于 #mplayer 携带的CSS变量，解释在 <a href="/forum.php?mod=viewthread&tid=79910&extra=page%3D1" target="_blank">圆环频谱模块主要设置</a> 一文里，感兴趣的朋友可以参阅。另，本帖所使用的模块一样支持LRC歌词同步，具体操作与新近制作的模块一样。</p>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> --tx: 0; 所以这个选用的是斜频谱。如果是1就是正频谱了。--ppBg: null; 缺省和null都表示用随机色，这里故意用一下null是为了演示吧，缺省更省力呢{:4_187:} “改变 #mplayer 的 width 和 height 也将无济于事，仅进度条会改变长短。”
嗯，知道了它的宽高是用来改变进度条长短的{:4_204:} 红影 发表于 2024-12-7 09:06
“改变 #mplayer 的 width 和 height 也将无济于事，仅进度条会改变长短。”
嗯，知道了它的宽高是用来改 ...
所以这个宽高也没必要修改，毕竟默认的正好呢{:4_187:} 这个鼠标触碰还能变色的。
背景很壮阔，这个视频选用也很奇妙，十分磅礴的感觉{:4_199:} 红影 发表于 2024-12-7 08:49
--tx: 0; 所以这个选用的是斜频谱。如果是1就是正频谱了。--ppBg: null; 缺省和null都表示用随机色，这里故 ...
缺省也挺好 红影 发表于 2024-12-7 09:06
“改变 #mplayer 的 width 和 height 也将无济于事，仅进度条会改变长短。”
嗯，知道了它的宽高是用来改 ...
也没多大必要 老师还真是挑着封的呀，
这个之前也是喜欢的一种，还想着会不会来。。
这个包比全全面，正的斜的两个版本都有了。。
小播上回整原生歌词的时候，通过中间深渐变色，使末端看上去跟水滴一样，
这里变成是线条随机渐变色。。颜色由内至外变浅变白最后盖帽。。
两种各有不同，都超级精彩
这个设计给满赞。。{:4_173:} 视频大气，有滔滔神水天上来的气势，加上瀑布背景，下方的波浪涌动，一下子就被惊艳到了。。。
音乐怪好听的，纯乐适合周末赏贴。。 花飞飞 发表于 2024-12-7 12:16
小播上回整原生歌词的时候，通过中间深渐变色，使末端看上去跟水滴一样，
这里变成是线条随机渐变色。。颜 ...
{:4_190:} 花飞飞 发表于 2024-12-7 12:19
视频大气，有滔滔神水天上来的气势，加上瀑布背景，下方的波浪涌动，一下子就被惊艳到了。。。
音乐怪好听 ...
{:4_173:} 马黑黑 发表于 2024-12-7 11:38
缺省也挺好
是啊，能少一句是一句{:4_173:} 马黑黑 发表于 2024-12-7 11:39
也没多大必要
是的，这个只要给定位就够了。 马黑黑 发表于 2024-12-7 13:57
看看今天喝的啥奶茶。。。{:4_170:} 马黑黑 发表于 2024-12-7 13:57
打倒表情帝{:4_170:} 漂亮！还支持LRC歌词同步！谢谢老师精彩分享{:4_191:} 杨帆 发表于 2024-12-7 18:37
漂亮！还支持LRC歌词同步！谢谢老师精彩分享
{:4_190:} 红影 发表于 2024-12-7 14:48
是啊，能少一句是一句
合适就好