新线条进度条播放器模块使用说明
本帖最后由 马黑黑 于 2024-11-29 20:32 编辑 <br /><br /><style>.art p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
.art svg { outline: 1px solid silver; }
.tRed { color: red; }
</style>
<div class="art">
<p>模块的引用及参数配置：</p>
<div id="d1"><pre id="p1">
<script type="module">
//引用模块 : tz 为 id="tz" 的帖子容器对象
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/line_lrc.js';
//配置模块参数一 ：基于纯音乐
hcplay(tz);
//配置模块参数二 ：基于lrc歌词同步
var geci = [,];
hcplay(tz, geci);
</script>
</pre></div>
<p>注意：模块参数的配置方法根据需要任选其一，不能两个都选。</p>
<p>模块引用与参数配置风格极简，不过也需要相应的前台配套才能顺利工作。一为CSS，需要引用一个CSS文档、做一些播放器的定位、配色等工作：</p>
<div id="d2"><pre id="p2">
<style>
@import 'https://638183.freep.cn/638183/web/mod/line_lrc.css'; /* 引用CSS资源 */
/* 播放器 id="mplayer" 定位与配色 */
#mplayer { bottom: 10px; --btn_bg: url('按钮图片地址') center/cover; --prog: white; --track: silver; }
/* 这里是其它的CSS代码 */
</style>
</pre></div>
<p>CSS变量中，播放按钮预设为 50*50 的尺寸，它用 #mplayer::before 做成，可以在帖子中重设此选择器以改变自己希望改变的属性；::after 则是播放时间信息展示。</p>
<p>二是HTML结构。在关键帖子元素中使用 class 属性以令所引用的CSS资源生效：</p>
<div id="d3"><pre id="p3">
<-- 播放控制器已经在模块中添加 -->
<div id="pa" class="pa">
<audio src="音乐地址"></audio>
<video class="vid" src="视频地址" autoplay loop muted></video>
<!-- div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div-->
<!-- div id="fsbtn" class="fsbtn">进入全屏</div-->
</div>
</pre></div>
<p>上面代码中，帖子容器、视频、全屏按钮、lrc歌词容器等凡有class属性的，都会使用对应的CSS资源所设置的class选择器所设定的样式，不满意的可使用 #选择器 重新设定相关CSS属性。</p>
<p>最后给出《我要找到你》一帖主要代码供参考：</p>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/mod/line_lrc.css';
#pa { margin: 30px 0 30px calc(50% - 513px);background: url('https://638183.freep.cn/638183/t24/webp2/findu.webp') no-repeat center/cover; }
#mplayer { bottom: 30px; color: snow; }
#lrc { bottom: 70px; }
#fsbtn { top: 10px; }
</style>
<div id="pa" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1406642934" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/07/17/17/27/27/video66978e7fb1c4d.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 fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/line_lrc.js';
//歌词只给出简要内容
var lrcAr = [,,];
hcplay(pa, lrcAr);
fscreen.fs(pa, fsbtn);
</script>
</pre></div>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
hl.hl(d1, p1);
hl.hl(d2, p2);
hl.hl(d3, p3);
hl.hl(hEdiv, hEpre);
</script>
这个给出了线型进度条的css封装和js封装，和那个圆环的一样简洁方便呢{:4_199:} 这么短短的几行代码，就能制作一个美帖，太好了{:4_199:} 一键全控等代码都被封装好了呢，做起帖子来太省力了{:4_187:} 感觉直接套用是太好了{:4_170:} 跑去看了看封起来的CSS插件https://638183.freep.cn/638183/web/mod/line_lrc.css
里面所有内容之前都在贴子里，好壮观啊。。{:4_173:}
再看现在的代码，小巧灵活，大赞。。{:4_173:}
这跟之前一图一视频的代码有得一比。。
花飞飞 发表于 2024-11-29 21:38
再看现在的代码，小巧灵活，大赞。。
这跟之前一图一视频的代码有得一比。。
{:4_203:} 马黑黑 发表于 2024-11-29 21:56
我发现我有事儿干了。。需要更新一波{:4_170:} 花飞飞 发表于 2024-11-30 10:21
我发现我有事儿干了。。需要更新一波
就是化个妆呗 这个套起来方便了 绿叶清舟 发表于 2024-11-30 19:28
这个套起来方便了
{:4_190:} 马黑黑 发表于 2024-11-30 13:39
就是化个妆呗
你天天都在更新，你天天都化{:4_173:} 花飞飞 发表于 2024-11-30 19:57
你天天都在更新，你天天都化
升级速度也太快了 马黑黑 发表于 2024-11-30 20:37
升级速度也太快了
你刚说的，画布画得比较快，魔法画布{:4_173:} 花飞飞 发表于 2024-11-30 22:58
你刚说的，画布画得比较快，魔法画布
{:4_189:} 马黑黑 发表于 2024-11-30 23:17
{:4_170:}绘个万紫千红 花飞飞 发表于 2024-12-1 13:03
绘个万紫千红
总是春 马黑黑 发表于 2024-12-1 14:10
总是春
{:4_170:}先过个冬天 花飞飞 发表于 2024-12-2 18:34
先过个冬天
冬天来了春天还会远吗
页:
[1]
2