高山流水
<style>@import 'https://638183.freep.cn/638183/web/mod/mplayer.css';
#pa { margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/5/gulu.jpg') no-repeat center/cover; }
#mplayer { width: 280px; height: 140px; left: 20px; bottom: 20px; background: rgba(0,128,0,.25); filter: blur(.5px); }
.vid { mix-blend-mode: screen; }
</style>
<div id="pa" class="pa" data-title="常静-高山流水">
<audio src="https://music.163.com/song/media/outer/url?id=5252656"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/02/20/43/14/video636265e2772ed.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mplayer.js';
hcplay(pa);
</script> 本帖最后由 马黑黑 于 2024-12-9 12:19 编辑 <br /><br /><div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/mod/mplayer.css';
#pa { margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/5/gulu.jpg') no-repeat center/cover; }
#mplayer { width: 280px; height: 140px; left: 20px; bottom: 20px; background: rgba(0,128,0,.25); filter: blur(.5px); }
.vid { mix-blend-mode: screen; }
</style>
<div id="pa" class="pa" data-title="常静-高山流水">
<audio src="https://music.163.com/song/media/outer/url?id=5252656"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/02/20/43/14/video636265e2772ed.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mplayer.js';
hcplay(pa);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
mplayer 是个简易的单曲播放器，里面有歌曲名称、播放进度、频谱等信息显示，同时音频控制交互是不可或缺的，并集成了音频与CSS动画、svg动画、video视频的同步联动管理机制。
mplayer 的CSS选择器为 #mplayer，使用者可以在帖子前台CSS代码设置必要的个性化设置。mplayer模块的相关默认设置描述如下：
频谱 ：浅蓝 + 雪白
按钮 ：绿蓝（青）
进度条 ：绿蓝（青）+ 银色
文本颜色 ：雪白
可以在帖子前台CSS代码中简单设置相关属性和变量：
#mplayer {
--prog: cyan; /* 进度条指示颜色 */
--track: silver;/* 进度条底色 */
--ppcolor1: snow; /* 频谱颜色一（上下两头的颜色） */
--ppcolor2: lightblue;/* 频谱颜色二（中间的颜色） */
/* 其他代码如 left、top、width、height等 */
}
#mplayer 默认尺寸 ：300*160，可改，建议高度在140-200之间
【注意】id="mplayer" 的 div 标签由 mplayer 模块自行追加，不要在帖子HTML代码中加入 <div id="mplayer">...</div> 之类的代码，否则模块将不能正常工作。
歌曲或帖子名称请在帖子容器元素加入 data-title 属性表示，例如：
<div id="tz" class="pa" data-title="卷珠帘-古筝">
<!--这里是帖子内容代码 -->
</div>
mplayer 模块还支持 LRC 歌词同步，使用方法请参照其他相应模块的说明。 马黑黑 发表于 2024-12-9 12:15
mplayer 模块还支持 LRC 歌词同步，使用方法请参照其他相应模块的说明。
看了css里面有歌词的封装，略改一下就可以hcplay(pa, geci);{:4_173:} 画面山清水秀，视频光粒子飞舞，这回另外给了个滤镜效果，封包的里面是没有的吧。。{:4_173:}
封装视频是中空的，如果要用熊猫的，那需要重新设置。 小播背景给了0.25的透明度，还有有丢丢颜色的，这比纯透明的更合适更好看。。昨天我自己试了一个纯透明和换图片背景的。。很妙。。。{:4_173:}
小播看似简单，功能强大。除了控制音乐频谱进度还与贴子中所有的动态关联可一并控制。。
音乐歌名可自行更改，这曲真是好听。。赞一个 不要在帖子HTML代码中加入 <div id="mplayer">...</div> 之类的代码，否则模块将不能正常工作。
留意到了最近的贴子里都没有，还纳闷了一下，现在看到说明了。。
如果要加歌词，需得加入<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>的吧。{:4_173:} 小体积，大容量。。见证奇迹的时刻。。{:4_170:} 昨天看到mplayer，今天就有实例了，这个漂亮，和昨天的相比，把进度时间移到播放器的右上了，感觉这个位置更合适了。{:4_199:} 红影 发表于 2024-12-9 19:27
昨天看到mplayer，今天就有实例了，这个漂亮，和昨天的相比，把进度时间移到播放器的右上了，感觉这个位置 ...
这是朴素的UI设计，不必过分花里花俏的 花飞飞 发表于 2024-12-9 19:02
看了css里面有歌词的封装，略改一下就可以hcplay(pa, geci);
这几乎是近期封装的模块的同一指令 花飞飞 发表于 2024-12-9 19:15
小体积，大容量。。见证奇迹的时刻。。
刘祥呢 这个是完全封装好的呢，甚至把html里的mplayer div 标签都封进去了，让帖子代码简洁到了极致。
太赞了{:4_199:} 红影 发表于 2024-12-9 19:31
这个是完全封装好的呢，甚至把html里的mplayer div 标签都封进去了，让帖子代码简洁到了极致。
太赞了{:4_ ...
前面的模块也是酱紫的 播放器的背景不是线性渐变了，而是半透明的，也很漂亮呢{:4_199:} 马黑黑 发表于 2024-12-9 19:30
这几乎是近期封装的模块的同一指令
所以还是记住的好{:4_173:} 红影 发表于 2024-12-9 19:33
播放器的背景不是线性渐变了，而是半透明的，也很漂亮呢
这个都可以前台令设 花飞飞 发表于 2024-12-9 19:35
所以还是记住的好
记不住没关系，用上时再去看看文档 马黑黑 发表于 2024-12-9 19:31
刘祥呢
黑刘谦在呢。。{:4_173:}