第 9 章音频和视频

╰半橙微兮° 2022-05-25 00:21 235阅读 0赞

本章主要探讨：HTML5中音频和视频元素，通过这两个原生的媒体元素向 HTML页面中  
嵌入音频和视频。

**一．音频和视频概述**  
首先，我们要理解两个概念：容器（container）和编解码器(codec)。  
1.视频容器  
音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其  
他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封  
面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：.avi、.flv、.mp4、.mkv、  
.ogg、.webm。  
2.编解码器  
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便  
音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是  
非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编  
码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，  
视频编解码器：H.264、VP8、Ogg Theora。  
3.浏览器支持情况  
起初，HTML5规范本来打算指定编解码器，但实施起来极为困难。部分厂商已有自己的  
标准，不愿实现标准；而有一些编解码器受专利保护，需要支付昂贵费用。最终放弃了统一  
规范的要求，导致各个浏览器实现自己的标准。  
![这里写图片描述][70]

除了上面三款浏览器，还有 Safari5+支持 MPEG-4,Opera11支持 WebM和 OGG，通过  
这组数据，只要备好 MP4和 OGG格式的即可，但对于新的高清标准 WebM，当然是非常必要  
的。因为 WebM不但清晰度高，而且免费，不受限制许可的使用源码和专利权。  
目前 Chrome浏览器，为了推广 WebM格式的视频。声称未来将放弃 H.264编码的视频，  
所以有可能在以后的版本中无法播放 MP4的视频。当然，目前演示的版本还是支持的。

**二．video视频元素**  
以往的视频播放，需要借助 Flash插件才可以实现。但 Flash插件的不稳定性经常让  
浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是 HTML5的 video  
元素。  
![这里写图片描述][70 1]

1.嵌入一个 WebM视频  
<video src=”test.webm” width=”800” height=”600”></video>  
解释：<video>插入一个视频，主流的视频为.webm，.mp4，.ogg等。src表示资源  
URL；width表示宽度；height表示高度。  
2.附加一些属性  
<video src=”test.webm” width=”800” height=”600” autoplay controls loop  
muted></video>  
解释：autoplay表示自动开始播放；controls表示显示播放控件；loop表示循环播  
放；muted表示静音。  
3.预加载设置  
<video src=”http://li.cc/test.webm” width=”800” height=”600” controls  
preload=”none”></video>  
解释：preload属性有三个值：none表示播放器什么都不加载；metadata表示播放  
之前只能加载元数据（宽高、第一帧画面等信息）；auto表示请求浏览器尽快下载整个视  
频。  
4.使用预览图  
<video src=”http://li.cc/test.webm” width=”800” height=”600” controls

poster=”img.png”></video>  
解释：poster属性表示在视频的第一帧，做一张预览图。  
5.兼容多个浏览器  
<video width=”800” height=”600” controls poster=”img.png”>  
<source src=”test.webm”>  
<source src=”test.mp4”>  
<source src=”test.ogg”>  
<object>这里引入 flash播放器实现 IE9以下，但没必要了</object>  
</video>  
解释：通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。

**二．audio音频元素**  
和 video元素一样，audio元素用于嵌入音频内容，而音频元素的属性和视频元素类  
似。音频的支持度和视频类似，使用<source>元素引入多种格式兼容即可。主流的音频格  
式有：.mp3，.m4a，.ogg，.wav。  
![这里写图片描述][70 2]  
1.嵌入一个音频  
<audio src=”test.mp3” controls autoplay></audio>  
解释：和嵌入视频一个道理。  
2.兼容多个浏览器  
<audio controls>  
<source src=”test.mp3”>  
<source src=”test.m4a”>  
<source src=”test.wav”>  
</audio>  
解释：略。

PS：更多设计到 API的 JavaScript控制，将在以后的基于 JavaScript基础后讲解。

[70]: /images/20220525/d90eb752f5f34a89b8fa77ebdd556dc4.png
[70 1]: /images/20220525/289ec8198d4b42fa8d2fb6ca8b90237c.png
[70 2]: /images/20220525/d303f2164f2648f4b98ce7f7340953d5.png