事件处理方式
在利用video元素或audio元素读取或播放媒体数据的时候，会触发一系列的事件，如果用JavaScript脚本来捕捉这些事件，就可以对这些事件进行处理了。对于这些事件的捕捉及其处理，可以按两种方式来进行。
一种是监听的方式：
addEventListener(“事件名”,处理函数,处理方式)方法来对事件的发生进行监听，该方法的定义如下所示。
videoElement.addEventListener(type,listener,useCapture);
语法说明：videoElement表示页面上的video元素或audio元素。type为事件名称，listener表示绑定的函数，useCapture是一个布尔值，表示该事件的响应顺序，该值如果为true，则浏览器采用Capture响应方式，如果为false，浏览器采用bubbing响应方式，一般采用false，默认情况下也为false。
另一种是直接赋值的方式。事件处理方式为JavaScript脚本中常见的获取事件句柄的方式。
<script>
var video;
function init()
{
video = document.getElementById("video1");
//监听视频播放结束事件
video.addEventListener("ended", function()
{
alert("播放结束。");
}, true);
}
function play()
{
// 播放视频
video.play();
}
function pause()
{
//暂停播放
video.pause();
}
</script>
</head>
<body onload="init()">
<!—可以添加controls属性来显示浏览器自带的播放用的控制条。 -->
<video id="video1" src="2.ogv" >
</video><br/>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
</body>
</html>
我们将介绍一下浏览器在请求媒体数据、下载媒体数据、播放媒体数据一直到播放结束这一系列过程中，到底会触发哪些事件。
loadstart事件：浏览器开始请求媒介；
progress事件：浏览器正在获取媒介；
suspend事件：浏览器非主动获取媒介数据，但没有加载完整个媒
介资源；
abort事件：浏览器在完全加载前中止获取媒介数据，但是并不是由
错误引起的；
error事件：获取媒介数据出错；
emptied事件：媒介元素的网络状态突然变为未初始化；可能引起的
原因有两个：1、载入媒体过程中突然发生一个致命错误；2、在浏览器
正在选择支持的播放格式时，又调用了load方法重新载入媒体。
stalled事件：浏览器获取媒介数据异常；
play事件：即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay（自动播放）属性。
pause事件：暂停播放，当执行了pause方法时触发。
loadedmetadata事件：浏览器获取完媒介资源的时长和字
节
loadeddata事件：浏览器已加载当前播放位置的媒介数据；
waiting事件：播放由于下一帧无效（例如未加载）而已停止
（但浏览器确认下一帧会马上有效）；
playing事件：已经开始播放
canplay事件：浏览器能够开始媒介播放，但估计以当前速率
播放不能直接将媒介播放完（播放期间需要缓冲）；
canplaythrough事件：浏览器估计以当前速率直接播放可
以直接播放完整个媒介资源（期间不需要缓冲）；
seeking事件：浏览器正在请求数据（seeking属性值为
true）；
seeked事件：浏览器停止请求数据（seeking属性值为
false）；
timeupdate事件：当前播放位置（currentTime属性）改
变，可能是播放过程中的自然改变，也可能是被人为地改变，或
由于播放不能连续而发生的跳变；
ended事件：播放由于媒介结束而停止；
ratechange事件：默认播放速率（defaultPlaybackRate
属性）改变或播放速率（playbackRate属性）改变；
durationchange事件：媒介时长（duration属性）改变
volumechange事件：音量（volume属性）改变或静音（
muted属性）。
综合实例
<!DOCTYPE html>
<html lang="en"><head>
<meta charset=utf-8 />
<title>事件捕捉实例</title>
</head>
<body>
<video >
<source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
</video>
<div class="videochrome paused">
<div class="controls">
<div class="scrub">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" scope="row"><button class="play" title="play">播放</button></td>
<td width="50" align="center"><div class="duration">0:00</div></td>
<td width="50" align="center"><div class="loaded"><div class="buffer"><div class="playhead"><span>0:00</span></div></div></div></td>
</tr>
</table>
</div>
</div>
</div>
<script>
var video = document.getElementsByTagName('video')[0],
//通过querySelector方法获标签的值并赋给变量
wrapper = document.querySelector('.videochrome'),
buffer = document.querySelector('.videochrome .controls .buffer'),
playhead = buffer.querySelector('.playhead'),
play = wrapper.querySelector('.play'),
duration = wrapper.querySelector('.duration'),
currentTime = playhead.querySelector('span');
video.addEventListener('loadeddata', canplay, false); //使用事件监听准备播放
video.addEventListener('play', playEvent, false); //使用事件播放
video.addEventListener('pause', pausedEvent, false); //播放暂停
video.addEventListener('ended', function () { //播放结束后停止播放
this.pause(); //显示暂停播放
}, false);
video.addEventListener('durationchange', updateSeekable, false); //播放的时长被改变
video.addEventListener('timeupdate', updatePlayhead, false); //使用事件监听方式捕捉事件
function canplay() { //调用canplay函数初始化媒体
initControls();
}
function playEvent() {
play.innerHTML = '暂停';
}
function pausedEvent() {
play.innerHTML = '播放';
}
function asTime(t) {
t = Math.round(t);
var s = t % 60;
var m = ~~(t / 60);
return m + ':' + two(s);
}
function two(s) {
s += "";
if (s.length < 2) s = "0" + s;
return s;
}
function updateSeekable() {
duration.innerHTML = asTime(video.duration); //媒体文件的总播放时间
}
function updatePlayhead() {
currentTime.innerHTML = asTime(video.currentTime); //媒体的当前播放时间
}
function initControls() {
duration.innerHTML = asTime(video.duration); //将播放时间以分和秒的形式输出
play.onclick = function () {
if (video.ended) { //如果媒体播放结束，播放时间从0开始
video.currentTime = 0;
}
video[video.paused ? 'play' : 'pause'](); //通过三元运算执行播放和暂停
};
}
</script>
</body>
</html>
