HTML5中video元素事件详解

事 件的处理方式

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

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

videoElement.addEventListener ( type,listener,useCapture);

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

1. video.addEventListener("error",function(){
2. /******代码段******/
3. },false);

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

1. id="video1" src="test.mov" onplay="begin_playing();">
2. function begin_playing(){
3. /******代码段******/
4. }

事件介绍

事件	描述
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属性（静音状态）被改变

事件捕捉示例

4. charset="UTF-8" />
6. type="text/javascript">
7. function playOrPauseVideo(){
8. var videoUrl = document.getElementById("videoUrl").value;
9. var video = document.getElementById("video");
10. //使用事件监听方式捕捉事件
11. video.addEventListener("timeupdate",function(){
12. var timeDisplay = document.getElementById("time");
13. //用秒数来显示当前播放进度
14. timeDisplay.innerHTML = Math.floor(video.currentTime) + "/" + Math.floor(video.duration) + " 秒";
15. },false);
17. if(video.paused){
18. if(videoUrl != video.src){
19. video.src = videoUrl;
20. video.load();
21. }else{
22. video.play();
23. }
24. document.getElementById("playButton").value= "暂停";
25. }else{
26. video.pause();
27. document.getElementById("playButton").value = "播放";
28. }
29. }
33. id="video" width="400" height="300" autoplay loop="loop">
34. 
    
35. 视频地址： type="text" id="videoUrl"/>
36. type="button" id="playButton" onClick="playOrPauseVideo()" value="播放"/>
37. id="time">

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