一生所爱
<style>@import 'https://638183.freep.cn/638183/web/mod/path_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp3/yusa.webp') no-repeat center/cover; }
#fsbtn { bottom: 10px; }
#mplayer { bottom: 50px; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=2117306429"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/04/08/18/15/16/video6613c3b472742.mp4" autoplay loop muted></video>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/path_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/path_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 513px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp3/yusa.webp') no-repeat center/cover; }
#fsbtn { bottom: 10px; }
#mplayer { bottom: 50px; }
</style>
<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=2117306429"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/04/08/18/15/16/video6613c3b472742.mp4" autoplay loop muted></video>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/path_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
hcplay(tz)
fscreen.fs(tz, fsbtn);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖最后由 马黑黑 于 2024-12-22 22:01 编辑
这是自由路径播放器，帖子的播放器效果使用了默认设置的路径。路径要求单路径，路径最好不要交缠。
播放器样式通过CSS选择器 #mplayer 设置一些CSS变量来实现，以下是默认设置代码，可以根据需要在帖子CSS代码中重新设置：
#mplayer {
--track: gray; /* 进度条底轨颜色 */
--prog: lightblue; /* 进度指示颜色 */
--xx: 0; /* 按钮和时间信息组件左边距 */
--yy: -16;/* 按钮和时间信息组件上边距 */
--ww: 200; /* 按钮和时间信息组件宽度（和整体播放器宽度一致）*/
--hh: 80;/* 按钮和时间信息组件高度（和播放器整体高度一致） */
--path: M5 5 Q100 150,195 5; /* 进度条路径*/
}
注意：变量 --ww 和 --hh 的改变可能会因为整体播放器的宽高而出现不符合常理的尺寸，这是因为按钮和时间信息组件使用 symbol 设计，它拥有自己的 viewBox 属性。若如此，可尝试多改几次，直到外观合意为止。
path_lrc 模块原生支持花潮格式LRC歌词同步机制，实现方法请参阅其它模块。
又是一个新的播放器封装，真漂亮。半弧形进度条正好扣住小播和时间，布局合理{:4_187:} 视频很有纵深感，背景很漂亮，全屏时更好看呢{:4_187:} 红影 发表于 2024-12-22 22:00
又是一个新的播放器封装，真漂亮。半弧形进度条正好扣住小播和时间，布局合理
这个是自由路径，默认路径是帖子的样子 代码简洁，这么点代码就有这么美妙的效果。封装的就是好{:4_187:} 马黑黑 发表于 2024-12-22 22:02
这个是自由路径，默认路径是帖子的样子
哦，可以设置任何形状呗。这个好，很自由{:4_187:} 红影 发表于 2024-12-22 22:01
视频很有纵深感，背景很漂亮，全屏时更好看呢
全屏质感极好 红影 发表于 2024-12-22 22:03
代码简洁，这么点代码就有这么美妙的效果。封装的就是好
这个和过去自由路径插件有相同的地方，不过播放器使用用 svgdr 设计，然后复制SVG代码进行封装。 红影 发表于 2024-12-22 22:04
哦，可以设置任何形状呗。这个好，很自由
是的，路径是开放的 马黑黑 发表于 2024-12-22 22:06
这个和过去自由路径插件有相同的地方，不过播放器使用用 svgdr 设计，然后复制SVG代码进行封装。
svgdr 可以设计出很多形状，让这个路径可以有无数种可能了呢{:4_187:} 漂亮，学习了{:4_178:} 朵拉 发表于 2024-12-22 22:09
漂亮，学习了
{:4_191:} 红影 发表于 2024-12-22 22:07
svgdr 可以设计出很多形状，让这个路径可以有无数种可能了呢
svgdr 方便一点，毕竟是我自己写的程序 马黑黑 发表于 2024-12-22 22:04
全屏质感极好
是的，十分引人入胜。 马黑黑 发表于 2024-12-22 22:07
是的，路径是开放的
弄得我现在就在想能弄出什么样子来了{:4_173:} 红影 发表于 2024-12-22 22:12
弄得我现在就在想能弄出什么样子来了
{:4_173:} 红影 发表于 2024-12-22 22:11
是的，十分引人入胜。
图片很漂亮 马黑黑 发表于 2024-12-22 22:10
svgdr 方便一点，毕竟是我自己写的程序
而且还一个个都做过讲解，做这个对我们正好是复习了{:4_187:}