这两个标签提供了在浏览器中不使用插件播放视频和音频的特性。书中提到了那场著名的HTML5视频格式大战，最后不同的浏览器还是选择了支持不同的格式。

各浏览器对编码格式的支持：


浏览器对媒体格式的支持

两个标签的实际使用，请参考w3school的教程。

http://www.w3school.com.cn/html5/html5_audio.asp
http://www.w3school.com.cn/html5/html5_video.asp

检测浏览器支持：
var hasVideo = !!(document.createElement(‘video’).canPlayType);

回退：

XML/HTML Code复制内容到剪贴板
<video src=”video.ogg”>  
<object data=”videoplayer.swf” type=”application/x-shockwave-flash”>  
<param name=”movie” value=”video.swf”/>  
</object>  
</video>  
如果浏览器不支持HTML5的浏览器会载入flash标签，支持的则会优先选择HTML5的video标签。但这样必须准备两套视频格式了。

同样对于audio元素，不同的浏览器支持不同的格式，可以提供两种不同的格式供浏览器选择。

XML/HTML Code复制内容到剪贴板
<audio controls>  
<source src=”johann_sebastian_bach_air.ogg”>  
<source src=”johann_sebastian_bach_air.mp3″>  
An audio clip from Johann Sebastian Bach.  
</audio>  
非常酷的实例：

最后书里面提供了一个canvas和video标签结合的实例：视频时间线浏览器，非常酷。使用video元素播放视频，然后用canvas显示视频的缩略图。在这个程序中作者使用一个特性，使用video标签对应的js对象代替img对象直接将视频的一帧绘制到canvas。


转载请注明：睿美印象网站建设工作室www.ruimeiyx.com