事件處理方式
在利用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 οnlοad="init()">
<!—可以添加controls屬性來顯示瀏覽器自帶的播放用的控制條。 -->
<video id="video1" src="2.ogv" >
</video><br/>
<button οnclick="play()">播放</button>
<button οnclick="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>