6月10号=》116页-120页

5.2　　使用JavaScript脚本控制媒体播放

　　　　　　在JavaScript脚本中获取<audio>元素对应的对象为HTMLAudioElement对象，<video>元素

　　　　　　对应的对象为HTMLVideoElement对象。

　　　　　　HTMLAudioElement对象和HTMLVideoElement对象支持的方法如下：

　　　　　　　　play()：播放音频、视频。

　　　　　　　　pause()：暂停播放。

　　　　　　　　load()：重新装载音频、视频文件。

　　　　　　　　canPlayType(type)：判断该元素是否可播放type类型的音频、视频。该属性指定该音频、视频

　　　　　　　　　　　　　　　　　　　文件的类型，该属性的值既可以是简单的MIME字符串，例如audio/ogg、

　　　　　　　　　　　　　　　　　　　audio/mpeg等，也可以使MIME字符串并带codecs属性，codecs属性

　　　　　　　　　　　　　　　　　　　用于指定该视频文件的编码格式。例如，可以指定为audio/ogg;codecs='vobis'。

　　　　　　　　　　　　　　　　　　　该方法可返回如下3个值：

　　　　　　　　　　　　　　　　　　　　probably：该浏览器支持播放此种类型的音频、视频。

　　　　　　　　　　　　　　　　　　　　maybe：该浏览器可能支持播放此种类型的音频、视频。

　　　　　　　　　　　　　　　　　　　　空字符串：该浏览器不支持播放此种类型的音频、视频。

 

　　5.2.2　　HTMLAudioElement与HTMLVideoElement的属性

　　　　　　当调用HTMLAudioElement、HTMLVideoElement的方法播放媒体后，JavaScript脚本可能还需要通过他们的

　　　　　　属性来了解其状态。HTMLAudioElement与HTMLVideoElement的属性如下：

 

属性名	只读	意义
buffered	是	该属性将会返回一个TimeRanges对象，通过该对象可以获取浏览器已经缓存的媒体数据
currentSrrc	是	该属性返回播放器正在播放的音频、视频文件的URL地址
currentTIme	否	该属性返回播放器正在播放音频、视频当前所处的时间点。该属性的返回值以秒为单位
defaultPlaybackRate	否	该属性返回HTMLAudioElement或HTMLVideoElement对象默认的播放速度。JavaScript脚 本可通过修改该属性来改变它们默认的播放速度
duration	是	该属性返回音频或视频的持续时间。该返回值以秒为单位
ended	是	该属性返回一个boolean，当播放结束时该属性返回true；否则返回false
error	是	在读取及播放音频、视频正常的情况下，该属性返回null。但无论在任何时候只要出现了错 误，该属性将会返回一个MediaError对象，该对象的code属性代表错误状态。可能出现如 下4中错误状态： 　　MEDIA_ERR_ABORTED(数值1)，媒体下载过程被中止。 　　MEDIA_ERR_NETWORK(数值2)，下载媒体资源时由于网络原因被中断 　　MEDIA_ERR_DECODE(数值3)，媒体资源下载完成，单尝试对媒体解码时出现错误 　　MEDIA_ERR_SRC_NOT_SUPPORTED(数值4)，媒体资源不可用或当前浏览器不支持 　　该媒体格式
muted	否	该属性返回播放器是否处于静音状态，返回true即表示处于静音状态。JavaScript脚本可通 过修改该属性来改变播放器的静音设置
networkState	是	该属性可获取下载音频、视频的网络状态。该属性可能返回如下4个值： 　　NETWORK_EMPTY(数值0)，处于初始状态 　　NETWORK_IDLE(数值1)，空闲状态，还未建立网络连接 　　NETWORK_LOADING(数值2)，正在加载音频、视频数据 　　NETWORK_NO_SOURCE(数值3)，媒体资源不可用或当前浏览器不支持该媒体格式，不执行加载
paused	是	该属性返回一个boolean值，true表示播放器处于展厅状态；否则返回false
playbackRate	否	该属性返回HTMLAudioElement或HTMLVideoElement对象当前的播放速度。JavaScript脚 本可通过修改该属性来改变他们当前的播放速度
played	是	该属性返回一个TimeRanges对象，通过该对象即可获取音频、视频的已播部分的时间段， 开始时间为已播部分的开始时间，结束时间为已播部分的结束时间
readyState	是	该属性返回当前音频、视频文件的准备状态。该属性可能返回如下几个属性值： 　　HAVE_NOTHING(数值0)，还没有得到音频、视频的任何数据 　　HAVE_METADATA(数值1)，已获取到音频、视频的元数据，但还没有获取到媒体数据，还不能播放 　　HAVE_CURRENT_DATA(数值2)，已经获取到当前播放位置的媒体数据，但还没有获 　　取到继续播放的媒体数据。对于视频来说，也就是获取了当前帧的数据，单还没有下一 　　帧的数据；或者当前帧已经是最后一帧了 　　HAVE_FUTURE_DATA(数值3)，已经获取了当前播放位置的媒体数据，也获取了下一 　　个位置的播放数据。对于视频来说，也就是获取了当前帧的数据，也获取了下一帧的数 　　据。如果当前正处于最后一帧，readyState属性不会返回HAVE_FUTURE_DATA 　　HAVE_ENOUGH_DATA(数值4)，已经获取了足够的媒体资源，播放器可以顺利地向 　　下播放
seekable	是	该属性返回一个TimeRanges对象，通过该对象可以获取音频、视频可定位的时间段。一般 来说，可定位的结束时间就是该音频、视频的开始时间，可定位的结束时间就是该音频、视 频的结束时间
seeking	是	该属性返回播放器是否正在尝试定位到指定时间点。返回true表示播放器正在定位；否则返 回false
startTime	是	该属性返回播放器播放音频、视频的开始时间。该属性通常返回0
volume	否	该属性返回播放器的音量。JavaScript脚本可通过修改该属性来改变播放器 音量

 

　　　　　　上面多个属性都涉及一个TimeRanges对象，这是一个类似于数组的对象，该对象里可能包含多个时间段(但实际上上面各属性

　　　　　　返回的TimeRanges里通常只包含一个时间段)。与数组类似，TimeRanges对象包含了一个length属性，该属性可以获取该

　　　　　　TimeRanges里包含几个时间段，如果该对象里没有包含任何时间段，该length属性将返回0。

　　　　　　TimeRanges还提供了如下两个方法：

　　　　　　　　start(index)：返回第index+1个时间段的开始时间。如果要获取TimeRanges里第一个时间段的开始时间，把index参数设为0即可。

　　　　　　　　end(index)：返回第index+1个时间段的结束时间。如果要获取TimeRanges里第一个时间段的结束时间，把index参数设为0即可。

　　　　　　需要注意的是有些浏览器虽然已经提供了对<audio>、<video>元素的支持，但也有可能并未完整地支持这些属性。

 

5.3　　事件监听

　　　　与其他HTML元素完全类似的是，<audio>元素和<video>素也会触发一些事件，元JavaScript脚本同样为这些事件绑定了事件监听器。

　　5.3.1　　事件

　　　　　　在HTML页面上使用<audio>、<video>元素时，除了可能触发onclick、onfocus等通用事件之外。

　　　　　　这两个元素还支持如下事件：

 

事件名	说明
onabort	当播放器还未下载完媒体数据而被中止下载时触发该事件
oncanplay	当播放器目前能播放音频、视频，但播放中间可能需要缓冲时触发该事件
oncanplaythrough	当播放器目前能播放音频、视频，而且播放中间不需要缓冲时触发该事件
ondurationchange	当音频、视频的长度改变时触发该事件
onemptied	当音频、视频元素突然为空时(网络错误、加载错误等)触发该事件
onended	当音频、视频元素播放结束时触发该事件
onerror	加载音频、视频数据出错时触发该事件
onloadeddata	播放器加载音频、视频的媒体数据完成后触发该事件
onloadedmetadata	播放器加载音频、视频的元数据完成后触发该事件
onloadstart	播放器开始加载音频、视频时触发该事件
onpause	暂停播放音频、视频时触发该事件
onplay	即将开始播放音频、视频时触发该事件
onplaying	正在播放音频、视频时触发该事件
onprogress	播放器正在加载音频、视频数据时触发该事件
onratechange	当播放速度改变时触发该事件
onreadystatechange	当播放器的readyState状态发生改变时触发该事件
onseeked	已成功定位到音频、视频的指定位置，且seekting属性变为false时触发该事件
onseeking	当seeking属性变为true时(即尝试定位到音频、视频的指定位置时)触发该事件
onstalled	播放器获取音频、视频数据的过程中(延迟)发生错误时触发该事件
onsuspend	播放器并未取得全部音频、视频数据之前中途停止时触发该事件
ontimeupdate	当播放位置发生改变时触发该事件。播放位置的改变可能有3方面的原因： 　　播放过程中自然改变 　　人为拖动导致播放位置的改变 　　播放不连续导致时间跳跃
onvolumechange	当播放器的音量被改变时触发该事件
onwaiting	播放过程中由于暂时得不到下一帧数据而暂停时触发该事件