js之音频和视频：audio和video

HTML5引入了audio和video标签来嵌入音频和视频，而不再像以前一样需要使用插件（如FLASH）才能使用音视频。用法：

//因为各个浏览器未能在对标准音频和视频编解码器支持上达成一致，因此通常需要是有source元素来为指定不同格式的媒体源，浏览器会依次使用source里的资源，直到找到适合自己的
<audio>
    <source src="test.mp3" type="audio/mpeg">
    <source src="test.ogg" type="audio/ogg;codec='vorbis'"
</audio>

//简单的写法
<audio src="test.mp3"></audio>
<video src="test.mov" width=300 height=300></video>

1、canPlayType()：判断媒体元素能否播放某一种类型的媒体文件

将媒体的MIME类型传递给canPlayType()，如果不能播放则返回空字符串，反之返回一个字符串“maybe”或者“probably”。

var a = new Audio();        //audio可以通过Audio构造函数创建，到vedio不能
if(a.canPlayType('audio/wav')){
    a.src = "test.wav";
    a.play();
}

2、控制媒体播放

play()	播放媒体资源
pause()	暂停媒体资源
currentTime	指定播放器应该跳过播放的时间，单位秒，取值区间为initialTime和duration之间
volume	设置音量，0~1
muted	为true进入静音模式
playbackRate	指定媒体播放速度，0~1表示慢放，1正常，大于1快进，为负表示回退
controls	为true时表示显示播放控件
loop	为true时表示循环播放
proload	指定用户在开始播放媒体之前，是否或者多少媒体内容需要预加载：其值有以下几种： 1、none：不需要预加载 2、metadata：加载诸如时长、比特率、帧大小这样的元数据，而非媒体数据 3、auto：预加载浏览器认为适量的媒体内容（默认值）
autoplay	为true时自动播放媒体，此属性为true相当于高度浏览器需要预加载媒体内容

3、查询媒体状态

audio和vedio元素有一些只读属性，可以供我们查询媒体状态

paused

如果是暂停状态，返回true

seeking

如果播放器正跳到一个新的播放点，返回true

ended

播放完毕并且停下来了返回true

duration

媒体时长，单位秒，如果在元数据未加载之前查询此属性，返回NaN

initialTime

已经缓存的数据的最早时间以及能够回退到的最早时间

played

返回已经播放的时间段

buffered

返回当前已经缓冲的时间段

seekable

返回当前播放器需要跳到的时间段

TIPS：以上上个字段返回的都是TimeRanges对象，包含length属性和start()/end()方法，length指当前的一个时间段，start()和end()指当前时间段的起始时间点和结束时间点

readyState

指定当前已经加载了多少媒体内容

常量	值	描述
HAVE_NOTHING	0	没有加载任何媒体内容和元数据
HAVE_METADATA	1	元素据已加载完毕，媒体内容未加载
HAVE_CURRENT_DATA	2	currentTime的媒体内容已经加载完毕，但还未加载足够的内容播放媒体
HAVE_FUTUER_DATA	3	已经加载一些媒体内容，但还未到可以流畅播放的地步
HAVE_ENOUGH_DATA	4	所有媒体内容已加载完毕

NetworkState

指定媒体元素是否使用网络或者为什么媒体文件不能使用网络

常量	值	描述
NETWORK_EMPTY	0	还没有开始使用网络，比如还未设置src属性
NETWORK_IDLE	1	没有通过网络来加载内容，如使用的缓存，或preload设置为none
NETWORK_LOADING	2	通过网络来获取的媒体内容
NETWORK_NO_SOURCE	3	无法获取媒体源

error

当加载或播放媒体出错时，浏览器会设置audio和vedio的error属性，未出错为null，error是一个json对象，包含描述错误数值的code属性，另外还定义了一些描述可能的错误代码的常量

常量	值	描述
MEDIA_ERR_ABORTED	1	用户要求浏览器停止加载媒体内容
MEDIA_ERR_NETWORK	2	发生网络错误，无法加载
MEDIA_ERR_DECODE	3	媒体类型正确，但由于编码导致无法正常解码或播放
MEAID_ERR_SRC_NOT_SUPPORTED	4	浏览器不支持媒体文件

if(a.error.code === a.error.MEDIA_ERR_EDCODE){        //a为audio或vedio对象
    alert('因编码原因导致无法正常解码和播放');
}

 

4、媒体相关事件

audio和vedio只能通过addEventListener()来注册处理函数，相关事件类型如下：

事件类型	描述
loadstart	当媒体元素开始请求媒体资源的时候触发
progress	正在通过网络加载媒体资源的时候触发，此事件一般每秒触发2-8次
loadedmetadata	元数据加载完毕时触发
loadeddata	当前播放位置的媒体内容首次加载完毕
canplay	已经加载一些媒体内容，可以开始播放，但需要缓冲更多数据，此时readyState为HAVE_CURRENT_DATA
canplaythrough	所有媒体内容已加载完毕，可以流畅播放
suspend	已经缓冲大量数据，可以暂停下载，此时NetworkState为NETWORK_IDLE
stalled	尝试加载数据，但无法获取到数据，此时NetworkState为NETWORK_LOADING
play	调用play()方法或设置相应的autoplay属性为true时触发，如果已经加载了足够多的缓存，紧接着会触发palying事件，否则触发waiting事件
waiting	由于未缓存足够的数据，导致播放未能开始或者播放停止
playing	已经开始播放媒体文件
timeupdate	currentTime属性发生改变时触发，此事件每秒会触发4-60次
pause	调用pause()方法时触发
seeking	通过脚本或用户通过播放控件将当前播放时间调至一个还未缓冲的时间点，导致在内容没有加载完时，停止播放。此时seeking属性值为true
seeked	seeking值又变为false
ended	播放完毕时，播放停止时触发
durationchange	duration属性发生变化时触发
volumechange	声音发生变化时触发
ratechange	playbackRate或defaultPlaybakcRate发生改变时触发
abort	用户要求停止加载媒体内容时触发,此时error.code为MEDIA_ERR_ABORTED
error	由于发生网络错误或者其它错误阻止媒体内容的加载时触发，此时error.code不会是MEDIA_ERR_ABORTED
emptied	发生了错误或者中止，导致networkState属性值又变回了NETWORK_EMPTY