HTML 音频和视频

1. 音频和视频概述
2. video视频元素
3. audio音频元素

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

一、音频和视频概述

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

1、视频容器

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

2、编解码器

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

3、浏览器支持情况

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

WebM	VP8	Vorbis	×	√	√	×	√
OGG	Theora	Vorbis	×	√	√	×	√
MPEG-4	H.246	AAC	√	×	疑问？	√	×
容器格式	视频编解码	音频编解码	IE9+	Firefox5+	Chrome13+	Safari5+	Opera11

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

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

二、video视频元素

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

属性名称	说明
src	视频资源的URL
width	视频宽度
height	视频高度
autoplay	设置后，表示立刻开始播放视频
preload	设置后，表示预先载入视频
controls	设置后，表示显示播放控件
loop	设置后，表示反复播放视频
muted	设置后，表示视频处于静音状态
poster	指定视频数据载入时显示的图片

1、嵌入一个WebM视频

<video src="test.webm" width="640" height="480"></video>

解释：< video > 插入一个视频，主流的视频为.webm，.mp4，.ogg等。src表示资源URL；width表示宽度；height表示高度。

2、附加一些属性

<video src="test.webm" width="640" height="480" controls></video>
<video src="test.webm" width="640" height="480" autoplay></video>
<video src="test.webm" width="640" height="480" controls loop></video>
<video src="test.webm" width="640" height="480" controls muted></video>

解释：autoplay表示自动开始播放；controls表示显示播放控件；loop表示循环播放；muted表示静音。

3、预加载设置

<video src="test.webm" width="640" height="480" controls preload="metadata"></video>

解释：preload属性有三个值：

属性	说明
none	表示播放器什么都不加载
metadata	表示播放之前只能加载元数据（高度、第一帧画面等信息）
auto	表示请求浏览器尽快下载整个视频。

4、使用预览图

<video src="test.webm" width="640" height="480" controls poster="img.jpg"></video>

解释：poster属性表示在视频的第一帧，做一张预览图。

5、兼容多个浏览器

<video width="640" height="480" controls>
    <source src="test.webm">
    <source src="test.mp4">
    <source src="test.ogg">
    <object>实现flash插件的播放，如果屏蔽IE9以下则不需要</object>
</video>

二、audio音频元素

和video元素一样，audio元素用于嵌入音频内容，而音频元素的属性和视频元素类似。音频的支持度和视频类似，使用< source > 元素引入多种格式兼容即可。主流的音频格式有：.mp3，.m4a，.off，.wav。

属性名称	说明
src	视频资源的URL
autoplay	设置后，表示立刻开始播放
preload	设置后，表示预先载入音频
controls	设置后，表示显示播放控件

1、嵌入一个音频

<audio src="test.mp3" controls autoplay></audio>

解释：和嵌入视频一个道理。

2、兼容多个浏览器

<audio controls>
    <source src="test.mp3">
    <source src="test.m4a">
    <source src="test.wav">
</audio>