音频和视频

首先，我们要理解两个概念：容器（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元素。

解释：

2.附加一些属性

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

3.预加载设置

解释：preload 属性有三个值：none 表示播放器什么都不加载；metadata 表示播放之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。

4.使用预览图

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

5.兼容多个浏览器

解释：通过元素引入多种格式的视频，让更多的浏览器保持兼容。

audio 音频元素
和video 元素一样，audio 元素用于嵌入音频内容，而音频元素的属性和视频元素类似。音频的支持度和视频类似，使用元素引入多种格式兼容即可。主流的音频格式有：.mp3，.m4a，.ogg，.wav。
src 视频资源的URL
autoplay 设置后，表示立刻开始播放视频
preload 设置后，表示预先载入视频
controls 设置后，表示显示播放控件
1.嵌入一个音频

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

2.兼容多个浏览器