论坛 › 动画音画 › 禅茶人生

马黑黑 发表于 2024-12-17 12:18

禅茶人生

<style>
        @import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/iiru.webp') no-repeat center/cover; }
        #player { position: absolute; width: 400px; height: 400px; object-fit: cover; mix-blend-mode: screen; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #prog { bottom: 50px; width: 400px; --bg1: snow; --bg2: cyan; --color: snow; }
        #fsbtn { left: 30px; top: 30px; }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=30413351"></audio>
        <video id="player" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8cf4ea84b.mp4" autoplay loop muted></video>
        <div id="prog" class="prog" data-tt="00:00 00:00"></div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
        import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var audio = new Aud(tz, player);
        audio.play();
        fscreen.fs(tz, fsbtn);
        player.oncontextmenu = (e) => e.preventDefault();
</script>

马黑黑 发表于 2024-12-17 12:19

<h2>本帖是 aud_lrc 模块发纯音帖演示：</h2>
<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/iiru.webp') no-repeat center/cover; }
        #player { position: absolute; width: 400px; height: 400px; object-fit: cover; mix-blend-mode: screen; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #prog { bottom: 50px; width: 400px; --bg1: snow; --bg2: cyan; --color: snow; }
        #fsbtn { left: 30px; top: 30px; }
&lt;/style&gt;

&lt;div id="tz" class="pa"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=30413351"&gt;&lt;/audio&gt;
        &lt;video id="player" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8cf4ea84b.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="prog" class="prog" data-tt="00:00 00:00"&gt;&lt;/div&gt;
        &lt;div id="fsbtn" class="fsbtn"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var audio = new Aud(tz, player);
        audio.play();
        fscreen.fs(tz, fsbtn);
        player.oncontextmenu = (e) =&gt; e.preventDefault();
&lt;/script&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2024-12-17 12:22

帖子使用视频做音频控制按钮，只需在实例化 Aud 对象时加入视频标签的 id 标识即可，不要引号，代码在第 19 行，视频的 id="player"，所以，实例化 Aud 第二个参数是 player

朵拉 发表于 2024-12-17 12:46

漂亮，学习了{:4_190:}

樵歌 发表于 2024-12-17 13:17

没有声音呵。{:4_195:}

小辣椒 发表于 2024-12-17 14:41

视频做播放器效果很美很灵动{:4_199:}

小辣椒 发表于 2024-12-17 14:42

马黑黑 发表于 2024-12-17 12:19
本帖是 aud_lrc 模块发纯音帖演示：

&lt;style&gt;


模版制作也是很轻松的

醉美水芙蓉 发表于 2024-12-17 17:07

马黑黑 发表于 2024-12-17 17:50

小辣椒 发表于 2024-12-17 14:42
模版制作也是很轻松的

最轻松

马黑黑 发表于 2024-12-17 17:50

醉美水芙蓉 发表于 2024-12-17 17:07
欣赏老师带来的精彩播放器！

{:4_190:}

马黑黑 发表于 2024-12-17 17:50

朵拉 发表于 2024-12-17 12:46
漂亮，学习了

{:4_180:}

马黑黑 发表于 2024-12-17 17:50

小辣椒 发表于 2024-12-17 14:41
视频做播放器效果很美很灵动

还不错的

马黑黑 发表于 2024-12-17 17:51

樵歌 发表于 2024-12-17 13:17
没有声音呵。

不会吧？应该很正常的

樵歌 发表于 2024-12-17 18:24

马黑黑 发表于 2024-12-17 17:51
不会吧？应该很正常的

我中午就是点不动呢

红影 发表于 2024-12-17 18:50

很漂亮，还能这样，用视频做播放器按钮，真没想到呢{:4_187:}

红影 发表于 2024-12-17 19:02

马黑黑 发表于 2024-12-17 12:22
帖子使用视频做音频控制按钮，只需在实例化 Aud 对象时加入视频标签的 id 标识即可，不要引号，代码在第 19 ...

这个还要实例化 Aud 对象，最后那句player.oncontextmenu = (e) => e.preventDefault();好像没怎么明白意思{:4_204:}

马黑黑 发表于 2024-12-17 19:17

红影 发表于 2024-12-17 19:02
这个还要实例化 Aud 对象，最后那句player.oncontextmenu = (e) => e.preventDefault();好像没怎么明白意 ...

禁止视频右键操作

马黑黑 发表于 2024-12-17 19:17

红影 发表于 2024-12-17 18:50
很漂亮，还能这样，用视频做播放器按钮，真没想到呢

以前不是用过吗

马黑黑 发表于 2024-12-17 19:18

樵歌 发表于 2024-12-17 18:24
我中午就是点不动呢

估计中午没穿自发热裤纸{:4_170:}

花飞飞 发表于 2024-12-17 20:16

视频宽高设置之后，width: 400px; height: 400px;保留中间主体粒子旋转部分，LOGO自然就没了。。
小播旋转，看上去跟圆形粒子在转似的，更飘逸了。。
之前是裁成圆形。。这里加个border-radius: 50%;也可以变圆。。{:4_173:}

查看完整版本: 禅茶人生