这一章我们开始接触到多媒体，也就是视频和音频。在HTML5出现之前，必须依赖第三方的插件，如Flash，但在HTML5中，这一切变得简单！HTML5原生支持多媒体，这是区别于之前版本的很大一点。在使用的过程中会越来越意识到HTML5带来的便利和快捷！
一 、视频文件格式
HTML5支持三种视频文件格式：
1 、Ogg Theora使用的文件扩展名为.ogg或.ogv
2 、MP4使用的文件扩展名为.mp4或.m4v
3 、WebM使用的文件扩展名为.webm
开发者至少需要为视频提供两种格式（MP4和WebM），才能确保获得所有兼容HTML5的浏览器的支持。
二 、在网页中添加单个视频
要在HTML5中添加视频，需要用到新的video元素，这个过程相当简单，浏览器会计算视频的尺寸，当然开发人员也可以自行设定。
<video src="url" width="" height=""> |
这是最简单的，不包含任何控件，默认情况下视频会暂停在第一帧，无法观看。
三 、为视频添加控件和自动播放
很容易通过添加属性来改变上一个阶段的情况，controls属性会告诉浏览器添加一套用于控制视频播放的控件，每个浏览器都有自己默认的一套控件，看起来并不一样。通常只有在用户点击播放按钮，视频才能播放，而添加autoplay属性会让视频自动播放。
<video src="url" width="" height="" controls autoplay> |
四 、为视频指定循环播放和海报
不仅可以为视频设为自动播放，还可以设置为持续播放，直到停止，但这种做法并不推荐，尽管实现起来不过是添加一个loop属性而已。
浏览器默认显示为视频的第一帧，你可以通过poster属性来改变，只需添加图片的url即可。
<video src="url" width="" height="" controls autoplay poster="url.jpg"> |
五 、阻止视频预加载
如果认为用户观看视频的可能性较低，可以告诉浏览器不要预先加载该视频，这样能节省带宽，尤其是对于移动用户。这里用到的是preload属性，该属性有三个值，默认为auto，不过建议在使用metadata值，介于none和auto之间，是个很不错的选择。
六 、使用多种来源的视频和被用文本
前面的例子都只用了一个视频文件，前面也已经说到，要获得所有兼容HTML5浏览器的支持，至少需要两个格式的视频：MP4和WebM。
这就要用到source元素。一个video元素可以包含任意数量的source元素，因此可以为视频定义多种格式，浏览器会加载第一个它支持的格式，忽略其他来源，而对于无法播放HTML5视频的浏览器会显示你提供的消息中的备用链接。
<video controls> <source src="….mp4" type="video/mp4"> <source src="….webm" type="video/webm"> <p><a href="">Download the video</p> </video> |
值得一提的是source里的type属性，反映的是视频的格式，也就是解码的方式。
七 、音频文件格式
音频文件格式比较多，常见的有.ogg、.mp3、.wav、.aac、.opus，对于音频，要取得最好兼容性的两种格式是.ogg和.mp3。
八 、在网页中添加带控件的单个音频文件
这个过程几乎与视频一模一样，只不过将video换成audio而已，audio相比video少了poster属性，其他的都一致。
九 、提供带备用内容的多个音频源
方式与视频一致，也是借助source元素，注意这里的type属性为audio/mp3或者audio/ogg等。
总结：其实总的来说，HTML5中多媒体的使用方法还是比较简单的，当然这些都很初步，如果你想深入进去，可以自定义播放的样式，更不必说HTML5强大的canvas和svg了。
有个很好的网站，可以参考看一下：http://mediaelementjs.com/