Wave in Dream
本帖最后由 山人 于 2024-4-22 13:00 编辑 <br /><br /><style>#papa { margin: -60px 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: lightgreen url('https://638183.freep.cn/638183/t24/2/u01.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; display: grid; place-items: center; pointer-events: none; position: relative; }
#papa::after { position: absolute; content: ''; background: transparent; width: 200px; height: 200px; top: 10px; cursor: pointer; pointer-events: auto; }
.vid { position: absolute; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
.vid:nth-of-type(1) { top: 10px; width: 200px; height: 200px; }
.vid:nth-of-type(2) { top: -60px; width: 100%; height: calc(100% + 60px); opacity: .5; }
</style>
<div id="papa" title="播放/暂停">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1942310751" autoplay loop></audio>
<video class="vid" src="https://638183.freep.cn/638183/vid/u01.mp4" poster="https://638183.freep.cn/638183/small/hxxb.webp" muted loop></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a31a0b980d.mp4" muted loop></video>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
aud.onplaying = aud.onpause = () => mState();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 山人 于 2024-4-22 13:00 编辑
代码分享：
<style>
#papa { margin: 60px 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: lightgreen url('https://638183.freep.cn/638183/t24/2/u01.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; display: grid; place-items: center; pointer-events: none; position: relative; }
#papa::after { position: absolute; content: ''; background: transparent; width: 200px; height: 200px; top: 10px; cursor: pointer; pointer-events: auto; }
.vid { position: absolute; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
.vid:nth-of-type(1) { top: 10px; width: 200px; height: 200px; }
.vid:nth-of-type(2) { top: -60px; width: 100%; height: calc(100% + 60px); opacity: .5; }
</style>
<div id="papa" title="播放/暂停">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1942310751" autoplay loop></audio>
<video class="vid" src="https://638183.freep.cn/638183/vid/u01.mp4" poster="https://638183.freep.cn/638183/small/hxxb.webp" muted loop></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a31a0b980d.mp4" muted loop></video>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
aud.onplaying = aud.onpause = () => mState();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
非常动听的音乐，欣赏了，感谢楼主的无私分享。 本帖最后由 山人 于 2024-4-22 09:00 编辑
第一个视频代码，行 11，有 poster 属性，值是一个图片地址。这是视频海报，作用主要是，当视频加载偏慢时，或不自动播放时，先加载海报图片，以免空空荡荡不友好。这里的作用主要是音频不能自动播放时有一个提醒，吸引访问者去点击花型按钮、播放音频。
帖子构思精巧，代码十分简洁，适合初学者模仿使用并很快能消化。
设计思路：
一个帖子容器，id="papa"（HTML代码在行09~13，CSS代码在行02），带一个背景图片，其内有音频一个（行10），不可见（因为没有controls属性）、自动播放（autoplay）、循环播放（loop）；视频两个（行11、行12），静音（muted）、循环播放（loop）。第一个视频假装充当音频控制按钮（其实它不是按钮，真正的按钮是 #papa 的伪元素 ::after，具体代码在行03），它有一个 poster 属性（前面已述），第二个视频是背景视频，占满整个帖子（因为要去掉水印，实际设置的高度是100% + 60px，top往上移动60px，具体代码在行04~06）。
交互实现：
JS代码实现交互、联动控制等功能，代码共4行，行16~19，一一解释如下——
行16：声明视频操作标识（要求视频有一个class标识，HTML代码中视频 class="vid"）；
行17：创建联动控制函数 mState()，用于控制视频的播放暂停，其依据是 audio 控件的 paused 属性，即音频是否处于暂停中（要求 audio 标签有 id="aud" 属性）；
行18：监听 audio 控件的 onplaying 和 onpause 事件，即正在播放中和正在暂停中两个事件，这两个事件发生时都运行联动函数 mState()，以便有效控制视频的播放与暂停；
行19：帖子容器即帖子的父元素 id="papa" 的点击事件，依据 audio 控件的播放暂停状态，即 paused 属性值，来决定点击功能，若audio暂停中则继续播放音乐，反之暂停音乐的播放。该点击事件仅在模拟按钮的第一个视频区域范围有效，因为在CSS里设置了 #papa 的 pointer-events 属性为 none，不可点击，而伪元素 ::after 的 pointer-events 为 auto，可以点击。另外，视频也和帖子容器一样，设置为不可点击，以避免过多的视频交互动作的产生。
CSS部分有一些设置细节这里就不提了，相信大家基本上都已经很熟悉了。 从帖子的设计角度看，本帖的第二个视频，即模拟波浪的视频，其实应该止于姑娘的前方，让它呈现在作品的上半部分，五分之三的占地面积。考虑到姑娘身边缺了个人，就残忍地让波浪来作伴 音乐极佳，第一次听，心旷神怡。。。
整贴是梦幻蓝色，星空和自由成就浪漫时刻。。。
{:4_199:} 这又是一个新的播放形式，小花播原以为是切换用的。。
看了说明是海报，只是提醒按纽位置作用。。。
新颖的设计。。 山人 发表于 2024-4-22 08:55
第一个视频代码，行 11，有 poster 属性，值是一个图片地址。这是视频海报，作用主要是，当视频加载偏慢时 ...
好详细的解说呀。。。认真学习中。。{:4_199:} 山人 发表于 2024-4-22 09:05
从帖子的设计角度看，本帖的第二个视频，即模拟波浪的视频，其实应该止于姑娘的前方，让它呈现在作品的上半 ...
这个视频波浪现在的位置也刚刚好啊。。
残忍地作伴这个形容词头一回听到{:4_170:}
南无月 发表于 2024-4-22 12:48
音乐极佳，第一次听，心旷神怡。。。
整贴是梦幻蓝色，星空和自由成就浪漫时刻。。。
缺一个人{:4_170:} 南无月 发表于 2024-4-22 12:54
这个视频波浪现在的位置也刚刚好啊。。
残忍地作伴这个形容词头一回听到
猩猩人类的网词 南无月 发表于 2024-4-22 12:51
好详细的解说呀。。。认真学习中。。
{:4_190:} 高人在山中，精美制作~~{:4_178:} 让空白伪元素充当按钮，这个很神奇；
让视频有一个 poster 属性，来当视频视频海报，这个也很神奇。
学习了，谢谢山人的详细讲解{:4_199:}
试着把第一个视频移走，果然需要点击伪元素的地方才能暂停{:4_173:}
当然是让它们重叠最好，我只是试试。 马黑黑 发表于 2024-4-22 12:58
缺一个人
搭个帐篷，取个名字叫守缺小屋{:4_170:} 马黑黑 发表于 2024-4-22 12:58
猩猩人类的网词
上古世纪的人类用词太高级了。。。 马黑黑 发表于 2024-4-22 12:58
喝完一杯再细看看。。{:4_170:} 南无月 发表于 2024-4-22 18:05
喝完一杯再细看看。。
好哒 南无月 发表于 2024-4-22 18:04
上古世纪的人类用词太高级了。。。
有智慧