前端开发 | 在线支持

audio和video元素支持HTML 5的媒体事件，详细说明如下表所示。使用JavaScript脚本可以捕捉这些事件并对其进行处理。处理这些事件一般有下面两种方式。

一种是使用addEventListener()方法监听，其用法如下：

addEventListener(“事件类型”,处理函数,处理方式)

另一种是直接赋值，即获取事件句柄的方法。例如，video.onplay=begin_playing，其中begin_playing为处理函数。

表1 音频与视频相关事件

事件	描述
abort	浏览器在完全加载媒体数据之前中止获取媒体数据。
canplay	浏览器能够开始播放媒体数据，但估计以当前速率播放不能直接将媒体播放完，即可能因播放期间需要缓冲而停止。
canplaythrough	浏览器以当前速率可以直接播放完整个媒体资源，在此期间不需要缓冲。
durationchange	媒体长度（duration属性）改变。
emptied	媒体资源元素突然为空时，可能是网络错误或加载错误等。
ended	媒体播放已抵达结尾。
error	在元素加载期间发生错误。
loadeddata	已经加载当前播放位置的媒体数据。
loadedmetadata	浏览器已经获取媒体元素的持续时间和尺寸。
loadstart	浏览器开始加载媒体数据。
pause	媒体数据暂停播放。
play	媒体数据将要开始播放。
playing	媒体数据已经开始播放。
progress	浏览器正在获取媒体数据。
ratechange	媒体数据的默认播放速率（defaultPlaybackRate属性）改变或播放速率（playbackRate属性）改变。
readystatechange	就绪状态（ready-state）改变。
seeked	浏览器停止请求数据，媒体元素的定位属性不再为真（seeking属性值为false）且定位已结束。
seeking	浏览器正在请求数据，媒体元素的定位属性为真（seeking属性值为true）且定位已开始。
stalled	浏览器获取媒体数据过程中出现异常。
suspend	浏览器非主动获取媒体数据，但在取回整个媒体文件之前中止。
timeupdate	媒体当前播放位置（currentTime属性）发生改变。
volumechange	媒体音量（volume属性）改变或静音（muted属性）。
waiting	媒体已停止播放但打算继续播放。

【示例】下面示例使用play()和pause()方法控制视频的播放和暂停播放，使用ended事件监听视频播放是否完毕，使用error事件监听播放过程中发生的各种异常，并及时进行提示。

<body onload="init()">
<video  id="video1" autoplay oncanplay="startVideo()"  onended="stopTimeline()" autobuffer="true"
    width="400px"  height="300px">
    <source  src="medias/volcano.ogv" type='video/ogg'>
    <source  src="medias/volcano.mp4" type='video/mp4'>
</video><br>
<button  onclick="play()">播放</button>
<button  onclick="pause()">暂停</button>
<script  type="text/javascript">
var video;
function init(){
    video =  document.getElementById("video1");
    //监听视频播放结束事件
    video.addEventListener("ended",  function(){
        alert("播放结束。");
    }, true);
    // 发生错误
     video.addEventListener("error",function(){  
        switch (video.error.code){
            case  MediaError.MEDIA_ERROR_ABORTED:
                alert("视频的下载过程被中止。");
                break;
            case MediaError.MEDIA_ERROR_NETWORK:
                alert("网络发生故障，视频的下载过程被中止。");
                break;
            case MediaError.MEDIA_ERROR_DECODE:
                alert("解码失败。");
                break;
            case  MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
                alert("媒体资源不可用或媒体格式不被支持。");
                break;
            default:
                alert("发生未知错误。");
        } 
    },false);
}
function play(){//播放视频
    video.play();
}
function pause(){ //暂停播放
    video.pause();
}
</script>
</body>