空巷
<style>.mybox { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 685px; background: url('https://638183.freep.cn/638183/t24/webp/ksxl.webp'); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; display: grid; place-items: center; }
.mybox video { position: absolute; bottom: 0px; width: 300px; height: 300px; object-fit: cover; border-radius: 50%; opacity: 1; mix-blend-mode: lighten; }
#mplayer { position: absolute; bottom: 10px; width: 300px; text-align: center; color: lightyellow; }
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
#mprog { width: 100%; accent-color: lightyellow; opacity: .9; outline: none; cursor: pointer; }
#btnplay { width: 60px; height: 60px; clip-path: circle(48%); opacity: .7; transition: filter .65s; cursor: pointer; animation: rot 5s linear infinite var(--state); }
#btnplay:hover { filter: hue-rotate(300deg); }
@keyframes rot { to { transform: rotate(360deg);} }
</style>
<div class="mybox">
<audio src="https://music.163.com/song/media/outer/url?id=572547816" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/01/91/5b4d5e7a6b4a6.mp4" loop></video>
<div id="mplayer" data-tt="0:00 0:00">
<img id="btnplay" src="https://638183.freep.cn/638183/small/mufuz2.jpg" alt="" title="播放/暂停" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" />
</div>
</div>
<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/mpku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
</script>
代码
<style>
.mybox { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 685px; background: url('https://638183.freep.cn/638183/t24/webp/ksxl.webp'); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; display: grid; place-items: center; }
.mybox video { position: absolute; bottom: 0px; width: 300px; height: 300px; object-fit: cover; border-radius: 50%; opacity: 1; mix-blend-mode: lighten; }
#mplayer { position: absolute; bottom: 10px; width: 300px; text-align: center; color: lightyellow; }
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
#mprog { width: 100%; accent-color: lightyellow; opacity: .9; outline: none; cursor: pointer; }
#btnplay { width: 60px; height: 60px; clip-path: circle(48%); opacity: .7; transition: filter .65s; cursor: pointer; animation: rot 5s linear infinite var(--state); }
#btnplay:hover { filter: hue-rotate(300deg); }
@keyframes rot { to { transform: rotate(360deg);} }
</style>
<div class="mybox">
<audio src="https://music.163.com/song/media/outer/url?id=572547816" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/01/91/5b4d5e7a6b4a6.mp4" loop></video>
<div id="mplayer" data-tt="0:00 0:00">
<img id="btnplay" src="https://638183.freep.cn/638183/small/mufuz2.jpg" alt="" title="播放/暂停" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" />
</div>
</div>
<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/mpku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
</script>
本帖最后由 马黑黑 于 2024-1-28 20:42 编辑
本帖所使用的JS文档适用于纯音乐帖子，或不需要显示歌词的帖子。它不是插件，也不是组件，它只是JS语句的简单分离：将处理复杂事件的众多语句剥离开来，形成一个文档，调用后，调用页面最简洁的时候只需一句代码：
<script src="https://638183.freep.cn/638183/web/js/mpku.js" charset="utf-8"></script>
但 discuz! 论坛不支持上述引用方式，需要酱紫：
<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/mpku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
</script>
不论引用方式如何，mpku.js 都有约定，简述如下：
（一）对帖子主元素没有任何要求，组织帖子内容的元素有没有 id 、有没有 class 都无所谓；
（二）对 audio 标签、video 标签没有任何 id、class 要求，mpku.js 接管页面中第一个 audio 标签、接管所有 video 标签的播放暂停（随第一个audio标签）；
（三）播放器UI由帖子或页面提供，CSS和HTML代码自己写，约定：① 播放器容器 id="mplayer" ；② range进度条 id="mprog" ；③ 控制按钮 id="btnplay" ；④ 播放器容器需要一个伪元素，content 属性值 为 attr(data-tt)，具体做法请查看二楼代码中的CSS和对应的html代码；
（四）若需要其他CSS关键帧动画响应音频的播放暂停，仅需要在 animation 属性值中加上 var(--state) 即可；
（五）可以另外加入自己的控制音频播放的JS代码，比方说，有一个元素 id="mybtn"，帖子中的 audio 标签的 id="myaudio"，则可以通过语句
mybtn.onclick = () => myaudio.paused ? myaudio.play() : myaudio.pause();
进行控制，它不会与引用的JS冲突。
这个js代码更简洁了，才4行。黑黑又带来新的封装，好棒啊{:4_199:} 这深深的巷子很有故事的感觉，配上玄幻的视频，更觉漂亮{:4_187:} 红影 发表于 2024-1-28 18:59
这深深的巷子很有故事的感觉，配上玄幻的视频，更觉漂亮
这个视频就是切成圆的 红影 发表于 2024-1-28 18:57
这个js代码更简洁了，才4行。黑黑又带来新的封装，好棒啊
这个专门针对纯乐帖 马黑黑 发表于 2024-1-28 19:41
这个视频就是切成圆的
是啊，这里的可以了，我前面不知道遇到什么问题，就是切不了。 红影 发表于 2024-1-28 20:28
是啊，这里的可以了，我前面不知道遇到什么问题，就是切不了。
肯定是哪里出错，没对应上 马黑黑 发表于 2024-1-28 19:47
这个专门针对纯乐帖
这个特别好，黑黑又弄了这么多封装呢{:4_199:} 红影 发表于 2024-1-28 20:29
这个特别好，黑黑又弄了这么多封装呢
不过要看一下三楼的说明，刚刚补充完毕 打开帖子看见圆还是大的，定格后是个播放器按钮了，周围有闪电出来一，下子感觉很魔幻的{:4_199:} 小巷深深，有故事感的新作品，黑黑最近小辣椒不在大批的新产品都发布了吧 今天先上来秒一眼再说 小辣椒 发表于 2024-1-28 20:40
今天先上来秒一眼再说
{:4_204:} 小辣椒 发表于 2024-1-28 20:38
打开帖子看见圆还是大的，定格后是个播放器按钮了，周围有闪电出来一，下子感觉很魔幻的
晚上嚎
小辣椒 发表于 2024-1-28 20:40
小巷深深，有故事感的新作品，黑黑最近小辣椒不在大批的新产品都发布了吧
也没多少，樵歌说，多乎哉不多也 马黑黑 发表于 2024-1-28 20:29
肯定是哪里出错，没对应上
是的，只要出问题的，肯定是哪里的细节出问题了，回头我再查查。
现在弄好了，其实我钻牛角尖了，不同长宽的的直接取圆就是椭圆了，我偏要去切割椭圆。哦我知道错哪了，我的椭圆不是不是取的长短半径，而是取了长宽{:4_173:} 马黑黑 发表于 2024-1-28 20:30
不过要看一下三楼的说明，刚刚补充完毕
已经仔细研读过了，虽然没要求，但有3个命名不能随意{:4_204:} 红影 发表于 2024-1-28 20:54
已经仔细研读过了，虽然没要求，但有3个命名不能随意
这和多数插件、组件不同，插件、组件可以提供接口，这个剥离一般都是自己设计自己用，不给接口