富媒体资源元素2、快速上手音视频开发2.1、audio元素的常用应用指南2.2、video元素的常用应用指南2.2.1、playsinline属性2.2.2、视频格式2.2.3、其他说明2.3、聊聊音视频的自动播放2.4、解密倍速播放的实现2.5、视频的画中画技术2.6、track元素与WebVTT字幕的显示2.6.1、深入了解track元素2.6.2、视频字幕的样式控制2、快速上手音视频开发2.1、audio元素的常用应用指南目前audio元素多用在交互简单的场景中例如一个运营活动页面用户希望在体验的时候伴随着背景音乐这里的背景音乐就特别适合使用audio元素实现代码如下当我们需要播放此音乐的时候执行play()方法就可以了。对于音频格式的选择不要犹豫一定选择MP3格式无他其兼容性最好当然其他两个常用的音频格式也并非一无是处。目前Web中主流的音频格式就只有如下三种MP3WAVOGG其中OGG音频格式的优点是体积特别小因为这种音频格式是有损压缩的照理来说体积小特别适合在Web中传输可惜OGG格式的兼容性不佳iOS Safari浏览器到现在都不支持它不过我们可以用source元素渐进使用它这样可以保证大多数的浏览器加载的是小尺寸音频兼顾了功能和流量开销。WAV格式的优点是这种格式是目前唯一一种可以使用纯JavaScript代码构建的音频格式。例如我们希望对本地的MP3文件进行剪裁或拼接然后将其重新保存到本地此时就离不开WAV格式。WAV格式的兼容性还可以除IE以外的浏览器都支持它不过它的文件尺寸通常是最大的。于是最终权衡兼容性、体积等因素MP3就是最佳的Web音频使用格式了。对了说一个有些人可能不知道的冷知识MP4视频也是可以作为音频文件使用的因为MP4视频也包含ACC编码音频不过MP4的体积比纯音频大太多了所以不建议这么使用。默认情况下audio元素是隐藏的特别适合背景音乐如果希望音频文件有播放界面则需要设置controls属性例如视觉效果可以参考下图截图自Chrome浏览器设置了静音。controls属性只能用在对音频播放器样式要求不高的场景。和图片元素不同audio元素的样式是很难完全自定义的因为里面的控件元素太多了CSS规范指定的那些伪类选择器目前浏览器的支持情况并不好。关于audio元素的使用了解上面这点知识就足够了虽然其还有几十个属性、十多种事件和数个方法但请无视不是说这些属性和方法没有用而是没有机会用由于audio元素在移动端尤其iOS设备中有诸多问题导致其根本无法应对复杂的音频交互因此在实际生产环境中我们都是使用Web Audio API或基于Web Audio API开发的JavaScript组件去开发音频应用的。这样做有什么问题呢比如很简单的preload预加载问题。audio元素支持一个名为preload的预加载属性可以让页面载入后提前加载一部分的音频数据这样播放的时候就不需要等待与缓存。然而就是这么个简单的属性不知道为何在iOS Safari浏览器下是无效的桌面端无此问题​这就导致用户点击播放按钮后要等一会儿才出现声音体验非常不好。通常的解决方法是在第一次触摸的时候音频静音同时触发音频play()然后很快再迅速触发pause()。然而在Chrome 50之后的版本中video或者audio执行play()方法后返回的是一个Promise也就意味着play()方法变成了一个异步过程。如果先执行play()方法然后立即执行pause()方法则会报错Uncaught (in promise) DOMException:The play()request was interrupted by a call to pause().很简单的一个预加载需求就变得特别麻烦因此只要音频涉及复杂交互或者多音频同时播放场景千万不要使用audio元素尤其是在移动端项目中所以audio元素那些属性和方法的学习价值也就不高了。2.2、video元素的常用应用指南video元素的本意是播放视频但毕竟大多数的网站都不是视频网站因此在实际的Web开发中video多用来实现特效。例如官网首页展示的星空大图其实是一个视频又例如运营活动页面的礼花绽放的效果其实也是用视频元素实现的。具体实现过程如下。准备一个纯黑色背景的礼花绽放的视频素材如图所示。然后覆盖在背景素材上实际开发中的背景就是我们的网页这里我使用夜景照片示意然后设置视频的混合模式为screen就可以了代码如下此时就可以看到夜空中礼花绽放的动态效果了如图所示。有对应的演示页面你可以通过在浏览器中输入https://www.htmlapi.cn/6/2-1.html访问来体验。在上面的例子中video元素出现了一个令不少人感觉陌生的属性playsinline值得专门讲一下。2.2.1、playsinline属性playsinline属性可以让视频像图片一样安安静静地内嵌在Web网页中。如果不设置该属性那么用户在触碰视频的时候会调用系统内置的播放进行交互显然把视频当作炫酷动效的这种场景是不需要出现播放进度或者下载按钮这样的内置交互功能的所以playsinline属性比看起来的要实用得多。不过在实际使用的时候考虑到各种内嵌的WebView类型会有很多私有的设置下面这段是我经常使用的属性组合用了很多年有些设置怕是已经没什么用了不过playsinline属性并不是万能的部分Android手机内置的默认浏览器无视playsinline属性自以为是地对video元素进行了自定义处理给前端开发带来了不必要的困扰例如无法隐藏下载、全屏等按钮如图所示。无法实现圆角效果。无法在视频上显示弹幕。这个问题不好解决或者说解决成本比较高等于要再造一个视频播放器具体来说就是使用JavaScript对视频资源进行解码然后将canvas元素作为播放容器使用Web Audio API播放音频来模拟视频播放效果。其中MPEG1视频MP2音频解码可以使用JSmpegH.264视频解码可以使用Broadway或者使用mp4box.js当然如果不考虑兼容性音视频最好的编解码解决方案一定是Webcodecs API这又是一块成体系的知识为了不让读者望而生畏我做了个演示页面你可以通过在浏览器中输入https://www.htmlapi.cn/6/2-3.html访问来体验感兴趣的读者可以了解一下这里就不继续展开详述了。2.2.2、视频格式适合在Web中传播的视频格式只有两个一个是WEBM另外一个是MP4。WEBM格式最大的优点是开源的编码格式在很早的时候就支持使用纯JavaScript代码生成了可以说在Webcodecs API出现之前它是浏览器生成视频最好的技术路径之一很成熟我特意做了个演示页面供大家参考感兴趣了解的读者可以通过在浏览器中输入https://www.htmlapi.cn/6/2-2.html访问来体验。可惜不知为何iOS Safari对WEBM格式的视频的支持一直不太好影响了此视频格式在Web中的传播。因此目前在Web中主流的视频格式就是MP4格式并且是H.264编码的视频格式H.264编码又包括avc1.42001f、avc1.4d0028等10种编码还有包含视频元信息的Moov盒子Moov盒子是最外层的盒子里面还有其他盒子这些盒子数量多20多个​、层级深多达6层​颇为复杂。另外Moov盒子的位置不同还会影响Web的性能如果在生成MP4视频的时候把Moov盒子放在了后面就会出现三次请求的问题如图所示。原理如图所示。可以使用ffmpeg批量处理也可以使用handbrake这个免费的开源软件进行优化勾选图中箭头所示的选项然后重新导出一遍即可。总之视频领域的水很深需要长期的积累和技能训练才能在这一领域有所建树。当然如果你只是应付日常开发需求那么本书介绍的这点知识就足够用了。2.2.3、其他说明audio元素支持的属性和方法video元素也都支持实用程度差不多唯一不同的就是video元素多了一个poster属性这个属性的作用很简单设置视频的预览封面图代码如下需要注意的是此封面图的尺寸要尽可能小千万不要使用好几MB的大图那没有任何意义因为一旦视频成功预加载数据封面图就会被视频第一帧的画面替换掉图片如果太大恐怕封面图还没加载好视频画面就加载出来了。至于如下表所示的事件大家大致了解一下即可当需要使用video元素做一些事情的时候可以翻到这一页看看。比如我们希望获取视频任意位置的画面帧则可以使用timeupdate事件代码如下如果你有播放视频的需求同时对视觉表现有要求那么不要犹豫直接使用Video.js(https://github.com/videojs/video.js)这个项目。应该没有遗漏了接下来就针对性地讲讲自动播放、倍速播放、画中画及外挂字幕的问题。2.3、聊聊音视频的自动播放如何让音频文件自动播放呢答案是没有办法除非将音量设置为0或者设置了静音设置muted属性​否则绝无可能。其实在浏览器支持HTML 5audio、video元素的很长一段时间大约有78年里设置自动播放的autoplay属性一直是生效的在2017年、2018年前后从移动端开始便禁用了自动播放再然后是桌面端浏览器也禁用了这一功能。我还记得是2018年当时Chrome禁用了自动播放遭到了很多开发者抗议后来又恢复autoplay给大家缓冲时间​随后没多久Chrome又不支持自动播放了然后就永远禁用自动播放了。一开始禁用自动播放的时候还是有一些很极客的手段绕过限制的例如img加载完毕触发不过很快这些手段全都无效了。目前对于Web网页如果你希望媒体资源自动播放声音必须要点击如以下代码所示或者触摸页面或者以键盘访问页面否则浏览器是不会自动播放的使用JavaScript代码触发play()方法也不行。原因不难理解网页在没有警告的情况下自发地发出声音显然会让用户不愉快体验不太好。因此浏览器通常只允许在特定情况下成功地进行自动播放。对于视频而言如果没有音轨或者静音是有可能触发自动播放的但也不一定要看浏览器的策略。浏览器提供了专门的API用来判断音视频元素是否支持自动播放该API名为Navigator.getAutoplayPolicy()假设视频元素的DOM对象变量是video则我们可以进行类似下面的判断处理不过目前getAutoplayPolicy()方法的兼容性还不够好只有Firefox浏览器支持故请谨慎使用。另外使用Web Audio API创建的音频资源也遵循浏览器的自动播放限制策略。2.4、解密倍速播放的实现目前所有的视频播放控件都会有一个倍速设置的选项如图所示请问你知道该选项是如何实现的吗看起来很高大上其实很简单使用playbackRate属性控制一下就好了。playbackRate属性是一个可读写的控制音视频播放速率的属性语法如下速率范围Gecko内核浏览器的速率范围是0.25到4.0超出这个范围就静音。对于Chrome浏览器我自己实地测试了一下速率上限居然可以达到16如图所示。2.5、视频的画中画技术很多看起来很“高大上”的技术实现其实都出乎意料地简单视频的画中画效果就是其一。所谓“画中画”​指的是可以让视频元素从Web网页中脱离出来直接作为一个独立的软件窗口在操作系统中显示例如右键点击任意一个Web视频元素就可以看到菜单选项中有一个名为“画中画”的选项如图所示。点击之就可以看到视频窗口变小同时定位于显示器窗口的最下角位置可移动尺寸可拉伸就算浏览器窗口最小化视频依然存在如图所示。于是我们可以一边写代码一边看网页视频。实现这么一个高级效果也只需要两三行代码。假设变量video就是我们的video视频元素则要进入画中画模式直接输入一行代码退出画中画模式也只用一行代码为了方便我们监听视频的播放状态还提供了2个事件API接口如下最后还提供了一个PictureInPictureWindow对象也就是画中画窗口对象包含width、height和onresize等属性例如width、height表示小窗口现在的高度和宽度onresize属性值是一个函数可以监听小窗口尺寸的改变。PictureInPictureWindow对象的获取在画中画响应事件的event对象中例如以上基本上就是HTML video Picture-in-Picture画中画技术的全部应用程序编程接口了两个方法进入和退出​、两个事件进入和退出及一个对象画中画窗体对象​。相信大家学起来一定都毫无压力。还有两点需要注意可以使用document.pictureInPictureElement判断当前浏览器是否进入了画中画模式返回当前的画中画元素是什么。还支持名为picture-in-picture的CSS伪类可以匹配进入画中画模式的视频元素。2.6、track元素与WebVTT字幕的显示HTML 5 Video视频支持外挂字幕文件后缀名是.vtt被称为WebVTT格式是专门的Web字幕格式。其使用很简单用一个track元素即可例如此时在Chrome浏览器下就会出现如图6-37所示的效果见画面截图下方的字幕。你可以通过在浏览器中输入https://www.htmlapi.cn/6/2-4.html访问来体验外挂字幕效果。其中加载的.vtt文件内容如下以上就是一个文本文件且格式很简单一开始声明一下WebVTT然后设置视频时间范围下一行就是字幕内容时间可以精确到毫秒但通常0.5秒足矣。实际上WebVTT规范可以有更多规则具体参见官网文档(https://w3c.github.io/webvtt/)。.vtt文件的MIME type是text/vtt。在Chrome和Firefox浏览器下.vtt字幕是可以无障碍加载显示的但是对于IE10浏览器虽然也支持.vtt字幕但是却需要定义MIME type否则会无视WebVTT格式。比较简单的方式就是在字幕所在文件夹下面添加一个.htaccess文件里面写上AddType text/vtt.vtt。通常我们保存在电脑中的外挂字幕都不是VTT格式的而是常见的如SRT格式的当需要将这些格式用在Web中时使用工具转换一下就可以了可以在搜索引擎中搜索srt2ttf找到对应的工具。2.6.1、深入了解track元素track元素完整的写法如下这里出现了几个属性分别是kind、label、srclang和default。其中(1)kindkind属性用来表明文字轨迹的作用默认值是subtitles也就是说如果没有添加kind属性kind属性值会被认为是subtitles但是如果有kind属性但属性值不合法则其会被认为是metadata。其中合法的属性值包括下面这些。subtitles就是我们平常看电影、看动漫时下面出现的字幕一般是翻译或者采访时口音不清的内容的字幕显示。有时候还会标注一些说明例如显示人物姓名和身份、当前场景地等。captions这里的captions专指隐藏式字幕(ClosedCaptioning, CC)释义说明如下。隐藏式字幕是电视节目或影碟中为有特殊情况或者需求的 观众而准备的字幕例如观众有听力障碍或者需要在无音条件下观赏节目。此时字幕中可使用一些解释性的语言来描述节目内容。根据我的测试从效果而言subtitles和captions几乎看不到任何区别应该是在语义上有区别或者字幕性质上有区别。subtitles主要对人说的话进行翻译或确认而captions不仅需要对人说的话的内容进行提示紧张的背景音乐或者汽车吱吱作响的刹车声都需要在字幕中描述出来。这样即使静音用户也能知道视频里到底发生了什么。我想经常看国外影视作品的小伙伴肯定会有类似的字幕体验有的只有对话字幕有的还包括其他信息这就是subtitles和captions的区别。如果我们对video元素设置controls属性则会看到“CC”标示按钮如图所示。点击按钮我们不仅可以切换字幕需要同时设置多个track元素​还可以关闭字幕如图所示。descriptions对视频内容的文本描述可以让盲人用户知道这个视频描述了什么虽然他看不见。如果设置kind属性值为descriptions则VTT文件内容不会在屏幕上出现。在视频地址不可见的场景中其也有类似作用。chapters用户浏览媒体资源时出现的章节标题。metadata元信息。用户不可见它是给脚本用的。例如自定义字幕效果但又不希望视频自己把字幕效果呈现出来。(2)label点击“CC”按钮选择字幕时出现的文字。可参见上图所示的字幕关闭截图。其中的“中文字幕”和“中文字幕修正​”就是使用label属性设置的。(3)srclangVTT文本信息使用的语言。例如中文zh英文en。MDN上说如果kind属性被设置为subtitles那么srclang必须被定义。但是根据我的测试不定义srclang也没有任何异常大家可以注意一下。还有一点我以为srclang和HTML页面的lang设置有关如会自动选中对应语言的字幕测试后发现我想多了。(4)default我开始以为default是默认优先显示的字幕后来发现不是。default指的是默认会显示的字幕。例如如果两个track元素都没有default属性则都不显示需要用户手动调出。另外default只能出现在一个track元素上。一个video视频标签中可以有多个track元素不同track元素的kind等属性值也都可以不一样。2.6.2、视频字幕的样式控制CSS中有专门的伪元素::cue可以控制字幕的样式。可以控制的CSS属性包括coloropacityvisibilitytext-decoration及相关属性text-shadowbackground及相关属性outline及相关属性font及相关属性包括line-heightwhite-spacetext-combine-uprightruby-position例如有如下相关设置则字幕直接就是白字黑边效果如图所示。除此之外WebVTT还支持一些HTML标签进行样式控制常见的有声音v标签、颜色c标签、加粗b标签、倾斜i标签如图所示​、下画线u标签、ruby标签、lang标签等。其中声音v标签比较常见我们可以通过设置属性区别是谁说的话例如还可以用如下CSS代码进行红绿颜色区分此时字幕效果就是韩梅梅说的话是红色的而李雷说的话则是绿色的。我们还可以直接用标签控制样式注意仅支持上面提到的这几种标签​例如或者类名其中的规则还是挺多的限于篇幅就不一一展开介绍了。基本上上面这几种情况已经够用了。