音频和视频

1. HTML5的audio和video元素代表这音频你和视频。这里有两个概念需要先理解一下。
   　　视频容器：这里有个封装的概念。封装了音频轨道、视频轨道、元数据（视频封面、标题、子标题、字幕）。主流视频容器支持以下格式的视频文件：.avi、.flv、.mp4、.mkv和.ogg。
   　　音频和视频编解码器：一组用来对音频和视频编码、解码以便能正常播放的算法。主流音频编解码器：AAC、MPEG-3和Ogg Vorbis。主流视频编解码器：H.264、VP8和Ogg Theora。
   目前除IE以外的主流浏览器都支持audio和video。
2. 使用HTML5audio和video的优势：
   　　浏览器自带，因而无需安装。
   　　更容易通过脚本来控制和播放内容。
   缺点是：缺少通用编解码器支持。
3. 通过脚本进行兼容性检测。
   

   var hasVideo=!!(document.createElement('vedio').canPlayType);

   这段脚本会动态创建vedio元素，然后检查canPlayType()函数是否存在。通过“!!”将结果转换为布尔值。如果检测结果是当前浏览器不支持该元素，则需要触发另外一套脚本向页面中引入媒体标签。可以把Flash等插件方式播放放到<video>备选代码</video>中。

   <video src="video.ogg">
   <object data="videoplayer.swf" type="application/x-shockwave-flash">
   <param name="movie" value="video.swf"/>
   </object>
   </video>

4. 如果不使用contros特性怎么让媒体文件正常播放呢？可以设置成这样：<audio autoplay></audio>，效果是当媒体文件加载完成后自动播放。不过大部分用户对此比较反感。还有一种比较好的方式是用js控制播放。
   （1）常用控制函数
   　　load()：通常不必调用。除非是动态生成的元素，用来在播放前预加载。
   　　play()：除非音频/视频已经暂停在其他位置，否则重头播放。
   　　pause()：暂停播放。
   　　canPlayType()：测试video元素是否支持给定MIME类型的文件。下面的代码可以快速判断是否支持fooType类型播放。　　　　　　

   var supportsFoolVideo=!!(document.createElement('video').canPlayType('fooType'));

   （2）部分只读特性
   　　duration：整个媒体文件的播放时长（s），无法获取返回NaN。
   　　paused：如果媒体文件当前被暂停，返回true，否则返回false。
   　　ended：如果媒体文件已经播放完毕，返回true。
   　　startTime：返回最早的播放时间，一般是0.0，除非是缓冲过的媒体文件，并且一部分内容已经不再缓冲区。
   　　error：在发生错误的时候返回错误代码。
   　　currentSrc：以字符串的形式返回当前正在播放或已经加载的文件。
   （3）部分可被脚本修改并直接影响播放的媒体元素特性
   　　autoplay：将媒体文件设置为创建后自动播放，或者查询是否已经设置为autoplay。
   　　loop：设置为true表示循环播放。或者查询。
   　　currentTime：返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置。
   　　controls：显示或隐藏用户控制界面，或者查询。
   　　volume：从0.0到1.0之间设置音量大小，或者查询。
   　　muted：设置或消除静音，或者查询。
   　　autobuffer：通知播放器在媒体文件开始播放前，是否进行缓冲加载。如果媒体文件已经设置了autoplay则忽略此设置。
   video比audio多了一些特性：
   　　poster：在视频加载完成之前，代表视频内容图片URL地址。类似于电影海报。该特性可读写。　
   　　width、height：读写视频尺寸。
   　　videoWidth、videoHeight：返回视频的固有或自适应宽度和高度。只读。
   　　除了这些之外，video还有一个audio不支持的特性：抓取图像帧。这里要与Canvas一起使用。使用drawImage()方法。

 

参考文献：HTML5高级程序设计-音频和视频