媒体元素
在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是
1. 嵌入视/音频：
<video src=""></video>
<video src="" id="" width="640" height="360">视频播放器无法使用</video>
<audio src="" id="">音频播放器无法使用</audio>
标签之间的元素表示后备内容，在浏览器不支持这两个媒体元素的情况下显示。
2. source,指定不同媒体来源
并不是所有的浏览器都支持所有媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一般要指定多种格式的媒体来源。
src 指播放媒体的URL地址
type 媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式。
<video id="video_1">
<source src="sample.ogv" type="video/ogg">
<source src="sample.mov" type="video/quicktime">
视频播放器无法使用
</video>
<audio id="audio_1">
<source src="" type="">
<source src="" type="">
音频播放器无法使用
</audio>
3. 视频格式
视频格式与浏览器的支持当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
浏览器 MP4 WebM Ogg
Internet Explorer YES NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES YES YES
MP4，带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM，带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg，带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
音频格式：
MP3、Wav、Ogg。
4. 自定义媒体播放器
btn.onclick = function(){
if(player.paused){
player.play();
this.value = "暂停";
}else{
player.pause();
this.value = "播放";
}
};
//实时更新当前播放时间
setInterval(function(){
curtime.innerHTML = player.currentTime;
},250);
<div class="mediaplayer">
<div class="video">
<video id="player" width="400" height="300">
<source src="../../video/html5.mp4" type="video/mp4">
</video>
</div>
<div class="controls">
<input type="button" id="video-btn" value="播放"/>
当前时间：<span id="curtime">0</span>
总时长：<span id="duration">0</span>
</div>
</div>
如果想在一段音乐播放后再播放另一段音频，必须在onfinish事件处理函数中调用play()方法
5. 音/视频属性：
src
指向要加载的媒体文件
width
video元素独有，播放器的宽度，以像素为单位
height
video元素独有，播放器的高度，以像素为单位
取值为boolean类型的
autoplay
取得或设置自动播放标志。
<video src="sample.mov" autoplay></video>
controls
用于显示或隐藏浏览器自带的播放用的控制条。控制条具有播放，暂停等按钮。。
<video src="sample.mov" controls></video>
ended
表示媒体文件是否播放完毕
loop
表示媒体文件在播放完成后是否再从头开始播放(循环播放)
muted
媒体文件是否静音
paused
表示是否暂停
取值为number类型的
整数
networkState
表示当前媒体的网路连接状态，0表示空，1表示正在加载，2表示加载元数据，3表示已经加载了第一帧，4表示加载完毕
bufferingRate
下载过程中每秒钟平均接收到的位数
defaultPlaybackRate 浮点数
设置或取得默认播放速度，默认为1.0秒(开发者可以改变)
duration
媒体的总播放时间
videoHeight
返回视频的高度，只适用于video
videoWidth
返回视频的宽度，只适用于video
readyState
表示媒体是否已经就绪。
0表示数据不可用，
1表示可以显示当前帧，
2表示可以开始播放，
3表示媒体可以从头到尾播放
4表示当前播放位置已经有数据可以播放，同时也获取到了可以让播放器前进的数据，而且浏览器确认媒体数据以某一种速度进行加载可以保证有足够的后续数据进行播放
浮点数
currentTime
已经播放的秒数
playbackRate
取得或设置当前的播放速度(用户可以改变)
start
取得或者设置媒体文件中开始播放的位置，以秒为单位
volume
取得或设置当前音量 0-1之间得
currentSrc
string
当前播放的媒体文件的URL，只读属性
6. 音/视频共有方法
play
播放媒体，自动将元素的paused属性的值变为false
pause
暂停播放，自动将元素的paused属性变为true
load
重新载入媒体进行播放，自动将元素的playbackRate属性的值变为defaultPlaybackRate属性的值，自动将元素的error值变为null
7. 音/视频共有事件
abort
下载中断
canplay
可以播放时，readyState值为2
canplaythrough
播放可继续，而且应该不会中断，readyState值为3
canshowcurrentframe
当前帧已下载完毕，readyState值为1
detaunavailable
因为没有数据而不能播放；readyState值为0
durationchange
duration属性的值改变
emptied
网路连接关闭
empty
发生错误阻止了媒体下载
ended
媒体已播放到了末尾，播放停止
error
播放媒体发生错误时该事件被激发
error属性
error.code
下载期间发生了网络错误，只读属性
1 :媒体数据的下载过程中由于用户操作原因而被终止
2 :确认媒体资源可用，但是在下载时出现网路错误，媒体数据的下载被终止
3 :确认媒体资源可用，但是解码时发生错误
4 :媒体资源部可用或媒体资源不被支持
load
所有媒体已经加载完毕，这个事件可能废弃，建议使用canplaythrough
loadeddata
媒体的第一帧已经加载完毕
loadedmetadata
媒体的元数据已经加载完毕
loadstart
下载已经开始
pause
播放已暂停
play
媒体已收到指令开始播放
playing
媒体已实际开始播放
progress
正在下载
ratechange
播放媒体的速度改变
seeked
搜索结束
seeking
正移动到新位置
stalled
浏览器尝试下载，但未收到数据
timeupdate
currentTime被以不合理或意外的方式更新
volumechange
volume属性值或muted属性值已改变
waiting
播放暂停。等待下载更多数据
