Wave in Dream

山人 · 发表于 2024-4-22 08:26

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由山人于 2024-4-22 13:00 编辑

山人 · 发表于 2024-4-22 08:27

本帖最后由山人于 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 08:29

非常动听的音乐，欣赏了，感谢楼主的无私分享。

山人 · 发表于 2024-4-22 08:55

本帖最后由山人于 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部分有一些设置细节这里就不提了，相信大家基本上都已经很熟悉了。