禅茶人生

马黑黑

马黑黑

本帖是 aud_lrc 模块发纯音帖演示：

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

马黑黑

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

朵拉

漂亮，学习了

樵歌

没有声音呵。

小辣椒

视频做播放器效果很美很灵动

小辣椒

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

<style>

模版制作也是很轻松的

马黑黑

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

最轻松

马黑黑

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

马黑黑

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

马黑黑

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

还不错的

马黑黑

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

不会吧？应该很正常的

樵歌

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

我中午就是点不动呢

红影

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

红影

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

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

马黑黑

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

禁止视频右键操作

马黑黑

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

以前不是用过吗

马黑黑

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

估计中午没穿自发热裤纸

花飞飞

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