一生所爱

马黑黑 · 发表于 2024-12-22 21:45

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-12-22 21:45

帖子代码

<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>

马黑黑 · 发表于 2024-12-22 21:46

本帖最后由马黑黑于 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歌词同步机制，实现方法请参阅其它模块。