月下舞者

马黑黑 发表于 2024-5-15 09:00

马黑黑 发表于 2024-5-15 09:01

本帖最后由马黑黑于 2024-5-15 09:13 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>相关说明</h2>
lrc_only.js插件有重要更新（主要解决歌词同步失准问题），此前观赏过《小池塘》一帖的朋友需要按 Ctrl+F5 硬刷新一下。
 
帖子构思：使用两个视频做帖子的背景，其中舞者视频使用 mix-blend-mode: screen 进行融合；使用一个视频做音频播放控制器，布置在右上角是为了挡住背景视频的水印。帖子需要容器元素（此帖为 id="papa" 的 div，视频及歌词UI等元素均装在其中。
 
视频中有两个带有 poster 属性，用于不支持自动播放或视频加载速度偏慢时展示广告图片。
<h2>帖子核心代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">    #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; }</cl-cd>
<cl-cd data-idx="3">    .vid { position: absolute; width: 100%; height: 100%; object-fit: cover; }</cl-cd>
<cl-cd data-idx="4">    .vid:nth-of-type(2) { mix-blend-mode: screen; }</cl-cd>
<cl-cd data-idx="5">    .vid:nth-of-type(3) { width: 160px; height: 160px; right: 0; top: 0; border-radius: 50% 0 50% 50%; cursor: pointer; }</cl-cd>
<cl-cd data-idx="6"></style></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><div id="papa"></cl-cd>
<cl-cd data-idx="9">    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2154869910" autoplay loop></audio></cl-cd>
<cl-cd data-idx="10">    <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></cl-cd>
<cl-cd data-idx="11">    <video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/18/65/5eef9970142b6.mp4" disablePictureInPicture loop muted></video></cl-cd>
<cl-cd data-idx="12">    <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></cl-cd>
<cl-cd data-idx="13"></div></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><script></cl-cd>
<cl-cd data-idx="16">    var sF = document.createElement('script');</cl-cd>
<cl-cd data-idx="17">    sF.charset = 'UTF-8';</cl-cd>
<cl-cd data-idx="18">    sF.src = 'https://638183.freep.cn/638183/web/js2024/lrc_only.js';</cl-cd>
<cl-cd data-idx="19">    document.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="20">    sF.onload = () => {</cl-cd>
<cl-cd data-idx="21">        LRC({</cl-cd>
<cl-cd data-idx="22">            papa: '#papa',</cl-cd>
<cl-cd data-idx="23">            lrc_css: 'top: 20px; color: lightblue; --bg: linear-gradient(rgba(0,0,128,.2), rgba(0,0,255,.6))',</cl-cd>
<cl-cd data-idx="24">            lrcAr: geci</cl-cd>
<cl-cd data-idx="25">        });</cl-cd>
<cl-cd data-idx="26">        aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="27">        player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="28">    };</cl-cd>
<cl-cd data-idx="29">    var mState = () => {</cl-cd>
<cl-cd data-idx="30">        let vids = papa.querySelectorAll('video');</cl-cd>
<cl-cd data-idx="31">        vids.forEach(vid => aud.paused ? vid.pause() : vid.play());</cl-cd>
<cl-cd data-idx="32">        papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');</cl-cd>
<cl-cd data-idx="33">    };</cl-cd>
<cl-cd data-idx="34">    papa.oncontextmenu = (e) => e.preventDefault();</cl-cd>
<cl-cd data-idx="35">    var geci = [, , ];</cl-cd>
<cl-cd data-idx="36"></script></cl-cd>
</div>

愤怒的葡萄 发表于 2024-5-15 09:03

这个比较特别啊。

红影发表于 2024-5-15 09:35

这个用了3个视频呢，如此美妙的组合。那个跳舞灯光人太有意思了{:4_187:}

红影发表于 2024-5-15 09:36

视频中有两个带有 poster 属性，用于不支持自动播放或视频加载速度偏慢时展示广告图片。

这设计真细心{:4_199:}

红影发表于 2024-5-15 09:38

按钮视频id="player"被整合到封装里去了，这样跟着做就太方便了{:4_199:}

红影发表于 2024-5-15 09:39

一上来就能欣赏到灯光人的舞蹈，真幸运{:4_173:}

马黑黑 发表于 2024-5-15 11:32

红影发表于 2024-5-15 09:39
一上来就能欣赏到灯光人的舞蹈，真幸运

{:4_191:}

马黑黑 发表于 2024-5-15 11:32

愤怒的葡萄发表于 2024-5-15 09:03
这个比较特别啊。

{:4_190:}

马黑黑 发表于 2024-5-15 11:33

红影发表于 2024-5-15 09:38
按钮视频id="player"被整合到封装里去了，这样跟着做就太方便了

这个 id 是帖子需要，不是 lrc_only 插件的需要

马黑黑 发表于 2024-5-15 11:34

红影发表于 2024-5-15 09:36
视频中有两个带有 poster 属性，用于不支持自动播放或视频加载速度偏慢时展示广告图片。

这设计真细心{: ...

{:4_190:}

马黑黑 发表于 2024-5-15 11:34

红影发表于 2024-5-15 09:35
这个用了3个视频呢，如此美妙的组合。那个跳舞灯光人太有意思了

是的吧？轻盈妙曼，婀娜多姿{:4_170:}

南无月 发表于 2024-5-15 12:44

这跳舞的视频我当时怎么没找到呢，不然动感舞曲里是可以用用{:4_173:}

南无月 发表于 2024-5-15 12:48

前几次发的画布效效太惊艳，第一眼看到的时候，还以为是画布做的跳舞人。。{:4_173:}

马黑黑 发表于 2024-5-15 12:49

南无月发表于 2024-5-15 12:48
前几次发的画布效效太惊艳，第一眼看到的时候，还以为是画布做的跳舞人。。

画布做这个就比较麻烦了，可能需要借助webGl编程

马黑黑 发表于 2024-5-15 12:49

南无月发表于 2024-5-15 12:44
这跳舞的视频我当时怎么没找到呢，不然动感舞曲里是可以用用

可能是看不上眼吧

南无月 发表于 2024-5-15 12:54

马黑黑发表于 2024-5-15 12:49
可能是看不上眼吧

根本没找到{:4_170:}
等有空我去换个试试

马黑黑 发表于 2024-5-15 13:09

南无月发表于 2024-5-15 12:54
根本没找到
等有空我去换个试试

好哒

南无月 发表于 2024-5-15 17:24

马黑黑发表于 2024-5-15 13:09
好哒

换上看了，还是放在这个贴子里效果更好。
那个背景是纯色，效果不咋滴

南无月 发表于 2024-5-15 17:27

马黑黑发表于 2024-5-15 12:49
画布做这个就比较麻烦了，可能需要借助webGl编程

其实看到它是视频就觉得有点正常~~
不然画布画出这么复杂的跟电影似的有点太妖孽了{:4_170:}

webGl编程现在听你说，很高级的样子

页: [1] 2 3 4 5 6 7 8 9

花潮论坛's Archiver

月下舞者