在利用video元素或audio元素读取或播放媒体数据的时候，会触发一系的事件，如果使用JavaScript脚本来捕捉这些事件，就可以对这些事件进行处理了。对这些事件的捕捉及处理，可以按两种方式来进行。

第一种是监听的方式，使用video元素或audio元素的addEventListener方法来对事件的发生进行监听，该方法的定义如下所示。

videoElement.addEventListener ( type,listener,useCapture);

videoElement表示页面上的video元素或audio元素。type为事件名称，listener表示绑定的函数，useCapture是一个布尔值，表示该事件的响应顺序，该值如果为true，则浏览器采用Capture（捕获）响应方式，如果为false，浏览器采用bubbing（冒泡）响应方式，一般采用fase，默认情况下也为false，如下使用方法。

第二种事件处理方式为JavaScript脚本常见的获取事件句柄的方式，如下例所示。

事件介绍

事件描述

loadstart 浏览器开始在网上寻找媒体数据

progress 浏览器正在获取媒体数据

suspend 浏览器暂停获取媒体数据，但是下载过程并滑正常结束

abort 浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的

error 获取媒体数据过程中出错

emptied video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误

 

2.在浏览器正在选择支持的播放格式时，又调用 了load方法重新载入媒体

stalled 浏览器尝试获取媒体数据失败

play 即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性

pause 播放暂停，当执行了pause方式时触发

loadedmetadata 浏览器获取完毕媒体的时间长和字节数

waiting 播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧

canplay 浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲

canplaythrough 浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲

seeking seeking属性变为true，浏览器正在请求数据

seeked seeking属性变为false，浏览器停止请求数据

timeupdate 由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变

ended 播放结束后停止播放

ratechange defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变

druationchange 播放时长被改变

volumechange volume属性（音量）被改变或muted属性（静音状态）被改变

事件捕捉示例

我们看一个事件捕捉示例，在播放过程中会经常触发timeupdat事件来通知当前的播放位置的改变，在该示例中，我们捕捉这个timeupdate事件来显示当前的播放进度。

 

相关方法

play方法

使用play方法来播放媒体，自动将元素的paused属性变为false。

pause方法

使用pause方法来暂停播放，自动将元素的paused属性变为true。

load方法

使用load方法来重新载入媒体进行播放，自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值，自动将元素的error的值变为null.

下面先来看一个媒体播放的示例。

canPlayType方法

使用canPlayType方法来测试浏览器是否支持指定的媒体类型，该方法定义如下所示。

var support = vodeElement.canPlayType(type);

videoElement表示页面上的video元素或者audio元素，该方法使用一个参数type，该参数的指定方法与soruce元素的type参数相同，都用播放文件的MIME类型来指定，可以在指定的字符串中加上表示媒体编码格式的codes参数。

该方法返回3个可能值：