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