午后・时光

Wave in Dream贴子说明

位置: 首页 > 马黑教程[ 发布时间: 2024.4.22  作者: 马黑黑  阅读: 46 ]

第一个视频代码,行 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文件
下一篇: 《魂引》贴子说明

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com