HTML5之多媒体

概览

html5新增了两个关于多媒体的元素：video和audio，前者是用于视频，后者用于音频。而他们使用非常简单

<audio src="xhn.mp3" controls="controls">
	您的浏览器不支持
</audio>
<hr>
<video src="BigBuckBunny_640x360.mp4" height="200" controls="controls">
	您的浏览器不支
</video>

主要是src属性，让它指向资源文件即可，视觉如下：

然而各浏览器对视频编码格式的支持不一致，因此上面的示例在chrome是OK的，但在firefox下却不能正常显示，为了兼容可以通过source元素来为同一个媒体指定多个播放格式和编码方式，浏览器会按照代码的顺序来选择，直到找到支持的格式为止。

<video height="200" controls="controls">
	<source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
	<source src="BigBuckBunny_640x360.ogv" type='video/ogg; codecs="theora,vorbis"'/>
	您的浏览器不支持
</video>

source元素具有几个属性：

• src - 媒体的url地址；
• type - 媒体类型，值是媒体文件的MIME；
• codecs - 使用的编码格式；

虽然type属性是可选属性，但最好不要省略，否则浏览器会从上到下选择时无法判断是否能播放，而先行加载一段数据！

属性

vidio和audio的属性大致相同，就一块来看看

• autoplay - 如果出现该属性，则视频在就绪后马上播放。
• controls - 如果出现该属性，则向用户显示控件，比如播放按钮。
• height - 设置视频播放器的高度。
• loop - 如果出现该属性，则当媒介文件完成播放后再次开始播放。
• preload - 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。该属性有三个可选的值：none、metadata和auto(默认值)，metadata表示只预加载媒体的元数据(媒体字节数、第一帧、播放列表、持续时间等)。
• src - 要播放的视频的 URL。
• width - 设置视频播放器的宽度。
• poster - 这是vidio独有的元素，当视频不可用的时，可以用该属性向用户展示一幅替代的图片。
• error - 正常情况该属性值为null，一旦出现异常该属性值为一个MediaError对象，该对象的code返回对应的错误状态，错误状态共有4中。
  1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
  2 = MEDIA_ERR_NETWORK - 当下载时发生错误
  3 = MEDIA_ERR_DECODE - 当解码时发生错误
  4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频
• 更多属性，请参考：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

方法

• addTextTrack() - 向音频/视频添加新的文本轨道
• canPlayType() - 检测浏览器是否能播放指定的音频/视频类型
• load() - 重新加载音频/视频元素
• play() - 开始播放音频/视频
• pause() - 暂停当前播放的音频/视频

事件

• audioTracks - 返回表示可用音轨的 AudioTrackList 对象
• autoplay - 设置或返回是否在加载完成后随即播放音频/视频
• buffered - 返回表示音频/视频已缓冲部分的 TimeRanges 对象
• controller - 返回表示音频/视频当前媒体控制器的 MediaController 对象
• controls - 设置或返回音频/视频是否显示控件（比如播放/暂停等）
• crossOrigin - 设置或返回音频/视频的 CORS 设置
• currentSrc - 返回当前音频/视频的 URL
• currentTime - 设置或返回音频/视频中的当前播放位置（以秒计）
• defaultMuted - 设置或返回音频/视频默认是否静音
• defaultPlaybackRate - 设置或返回音频/视频的默认播放速度
• duration - 返回当前音频/视频的长度（以秒计）
• ended - 返回音频/视频的播放是否已结束
• error - 返回表示音频/视频错误状态的 MediaError 对象
• loop - 设置或返回音频/视频是否应在结束时重新播放
• mediaGroup - 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
• muted - 设置或返回音频/视频是否静音
• networkState - 返回音频/视频的当前网络状态
• paused - 设置或返回音频/视频是否暂停
• playbackRate - 设置或返回音频/视频播放的速度
• played - 返回表示音频/视频已播放部分的 TimeRanges 对象
• preload - 设置或返回音频/视频是否应该在页面加载后进行加载
• readyState - 返回音频/视频当前的就绪状态
• seekable - 返回表示音频/视频可寻址部分的 TimeRanges 对象
• seeking - 返回用户是否正在音频/视频中进行查找
• src - 设置或返回音频/视频元素的当前来源
• startDate - 返回表示当前时间偏移的 Date 对象
• textTracks - 返回表示可用文本轨道的 TextTrackList 对象
• videoTracks - 返回表示可用视频轨道的 VideoTrackList 对象
• volume - 设置或返回音频/视频的音量

可以使用两种方式来捕捉这些事件

1. 监听

   addEventListener(type:String, listener:Function, useCapture:Boolean)

   type:String：事件的类型。
   listener:Function：侦听到事件后处理事件的函数，此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果。
   useCapture:Boolean (default = false)：这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

2. 事件句柄

   <video height="200" controls="controls" poster="p.jpg" onPlay="doplay()">