本帖最后由 马黑黑 于 2024-5-15 09:13 编辑
相关说明
lrc_only.js插件有重要更新（主要解决歌词同步失准问题），此前观赏过《小池塘》一帖的朋友需要按 Ctrl+F5 硬刷新一下。
帖子构思：使用两个视频做帖子的背景，其中舞者视频使用 mix-blend-mode: screen 进行融合；使用一个视频做音频播放控制器，布置在右上角是为了挡住背景视频的水印。帖子需要容器元素（此帖为 id="papa" 的 div，视频及歌词UI等元素均装在其中。
视频中有两个带有 poster 属性，用于不支持自动播放或视频加载速度偏慢时展示广告图片。
帖子核心代码
<style>
#papa { margin: 20px 0 20px calc(50% - 581px); width: 1000px; height: 600px; background: lightblue; box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.vid:nth-of-type(2) { mix-blend-mode: screen; }
.vid:nth-of-type(3) { width: 160px; height: 160px; right: 0; top: 0; border-radius: 50% 0 50% 50%; cursor: pointer; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2154869910" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2419216/00/01/98/5b5459ad8a034.mp4" poster="https://638183.freep.cn/638183/t23/1/qbui.jpg" disablePictureInPicture loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/18/65/5eef9970142b6.mp4" disablePictureInPicture loop muted></video>
<video class="vid" id="player" src="https://img.tukuppt.com/video_show/2475824/00/08/20/5d19984aa5b7c.mp4" poster="https://638183.freep.cn/638183/small/f01.png" title="播放/暂停" disablePictureInPicture loop muted></video>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'UTF-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/lrc_only.js';
document.body.appendChild(sF);
sF.onload = () => {
LRC({
papa: '#papa',
lrc_css: 'top: 20px; color: lightblue; --bg: linear-gradient(rgba(0,0,128,.2), rgba(0,0,255,.6))',
lrcAr: geci
});
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
};
var mState = () => {
let vids = papa.querySelectorAll('video');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
papa.oncontextmenu = (e) => e.preventDefault();
var geci = [[2.2,"月下舞者",10.4], [12.63,"……",6.2], [207.01,"la la la……",8.2]];
</script>
| 
发表于 2024-5-15 09:00
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-5-15 09:03
