第一个视频代码，行 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部分有一些设置细节这里就不提了，相信大家基本上都已经很熟悉了

原贴地址：http://qhxy.52qingyin.cn/art/bshow.php?st=4&sd=4&art=uvuz_1713745247

前一篇: svg带lrc圆环播放器封装成了JS文件
下一篇: 《魂引》贴子说明