HTML5中video元素事件詳解
阿新 • • 發佈：2019-02-12
事 件的處理方式
在利用video元素或audio元素讀取或播放媒體資料的時候，會觸發一系的事件，如果使用JavaScript指令碼來捕捉這些事件，就可以對這些事件進行處理了。對這些事件的捕捉及處理，可以按兩種方式來進行。
第一種是監聽的方式，使用video元素或audio元素的addEventListener方法來對事件的發生進行監聽，該方法的定義如下所示。
videoElement.addEventListener ( type,listener,useCapture);
videoElement表示頁面上的video元素或audio元素。type為事件名稱，listener表示繫結的函式，useCapture是一個布林值，表示該事件的響應順序，該值如果為true，則瀏覽器採用Capture響應方式，如果為false，瀏覽器採用bubbing響應方式，一般採用fase，預設情況下也為false，如下使用方法。
- video.addEventListener("error",function(){
- /******程式碼段******/
- },false);
第二種事件處理方式為JavaScript指令碼常見的獲取事件控制代碼的方式，如下例所示。
- <videoid="video1"src="test.mov"onplay="begin_playing();"></video>
- function begin_playing(){
- /******程式碼段******/
- }
事件介紹
| 事件 | 描述 |
|---|---|
| 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屬性（靜音狀態）被改變 |
事件捕捉示例
- <!DOCTYPE html>
- <html>
- <head>
- <metacharset="UTF-8"/>
- <title>事件捕捉</title>
- <scripttype="text/javascript">
- function playOrPauseVideo(){
- var videoUrl = document.getElementById("videoUrl").value;
- var video = document.getElementById("video");
- //使用事件監聽方式捕捉事件
- video.addEventListener("timeupdate",function(){
- var timeDisplay = document.getElementById("time");
- //用秒數來顯示當前播放進度
- timeDisplay.innerHTML =Math.floor(video.currentTime)+"/"+Math.floor(video.duration)+" 秒";
- },false);
- if(video.paused){
- if(videoUrl != video.src){
- video.src = videoUrl;
- video.load();
- }else{
- video.play();
- }
- document.getElementById("playButton").value="暫停";
- }else{
- video.pause();
- document.getElementById("playButton").value ="播放";
- }
- }
- </script>
- </head>
- <body>
- <videoid="video"width="400"height="300"autoplayloop="loop"></video>
- <br/>
- 視訊地址：<inputtype="text"id="videoUrl"/>
- <inputtype="button"id="playButton"onClick="playOrPauseVideo()"value="播放"/>
- <spanid="time"></span>
- </body>
- </html>
我們看一個事件捕捉示例，在播放過程中會經常觸發timeupdat事件來通知當前的播放位置的改變，在該示例中，我們捕捉這個timeupdate事件來顯示當前的播放進度。