概览
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 - 设置或返回音频/视频的音量
可以使用两种方式来捕捉这些事件
- 监听
type:String：事件的类型。addEventListener(type:String, listener:Function, useCapture:Boolean)
listener:Function：侦听到事件后处理事件的函数，此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果。
useCapture:Boolean (default = false)：这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。 - 事件句柄
<video height="200" controls="controls" poster="p.jpg" onPlay="doplay()">