音频和视频概述-蒲公英云

音频和视频概述

学习要点：

1.音频和视频概述

2.video 视频元素

3.audio 音频元素

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

一．音频和视频概述

首先，我们要理解两个概念：容器（container）和编解码器(codec)。

1.视频容器

音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：.avi、.flv、.mp4、.mkv、

.ogg、.webm。

2.**编解码器**

音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，

视频编解码器：H.264、VP8、Ogg Theora。

3.浏览器支持情况

起初，HTML5规范本来打算指定编解码器，但实施起来极为困难。部分厂商已有自己的标准，不愿实现标准；而有一些编解码器受专利保护，需要支付昂贵费用。最终放弃了统一规范的要求，导致各个浏览器实现自己的标准。

容器格式	视频编解码	音频编解码	IE9+	Firefox5+	Chrome13+

WebM	VP8	Vorbis	×	√	√

OGG	Theora	Vorbis	×	√	√

MPEG-4	H.264	AAC	√	×	疑问？

除了上面三款浏览器，还有 Safari5+支持 MPEG-4,Opera11支持 WebM和 OGG，通过这组数据，只要备好 MP4和 OGG格式的即可，但对于新的高清标准 WebM，当然是非常必要的。因为 WebM不但清晰度高，而且免费，不受限制许可的使用源码和专利权。

目前 Chrome浏览器，为了推广 WebM格式的视频。声称未来将放弃 H.264编码的视频，所以有可能在以后的版本中无法播放 MP4的视频。当然，目前演示的版本还是支持的。

二．video视频元素

以往的视频播放，需要借助Flash插件才可以实现。但 Flash插件的不稳定性经常让浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是 HTML5的 video元素。

	<video>元素的属性
属性名称	说明

src	视频资源的 URL

width	视频宽度

height	视频高度

autoplay	设置后，表示立刻开始播放视频

preload	设置后，表示预先载入视频

controls	设置后，表示显示播放控件

loop	设置后，表示反复播放视频

muted	设置后，表示视频处于静音状态

poster	指定视频数据载入时显示的图片