HTML5 視頻對象提供了很多事件，這些事件可以幫助簡化和增強網頁的內容。
在此處將看到使用事件檢查內容是否可用、視頻播放狀態以及如何在視頻中監視當前播放位置的示例。
HTML代碼如下：
<!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8"> <meta name="author" content="boloog" /> <meta name="format-detection" content="telephone=no" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" name="viewport" /> <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"> <title>視頻事件的例子</title> </head> <body> <p>粘貼視頻URL地址：</p> <input type="text" id="videoFile" style="width: 300px;" value="http://gdzhcdn.vxinyou.com/down/video/vxinyou/ios_640x480.MP4" /> <button id="loadVideo">加載</button><br/> <video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element"> HTML5 Video is required for this example </video> <div id="buttonbar" style="display: none; font-size:larger;")> <button id="restart">重新開始</button> <button id="slower">播放減慢</button> <button id="rew">倒回</button> <button id="play" title="Play button">播放</button> <button id="fwd">快進</button> <button id="faster">播放加快</button> <button id="mute">禁音</button> <br /> <label>復位回放速度: </label><button id="normal" title="Reset playback rate button">=</button> <br /> <label> 音量: </label> <button id="volDn" title="Volume down button">-</button> <button id="volUp" title="Volume up button">+</button> <div id="status">總時長（秒）: <span id="vLen"></span> <br /> 當前時間: <span id="curTime" title="Current time"></span><br /> 剩余的時間: <span id="vRemaining" title="Remaining time"></span></div> </div> <div id="errorMsg" style="color:Red;"></div> <div title="事件狀態區域" > <label>oncanplaythrough: </label><span class="stats" id="cpt"></span><br /> <label>onloadstart: </label><span class="stats" id="ls"></span><br /> <label>onprogress: </label><span class="stats" id="pg"></span><br /> <label>onloadeddata: </label><span class="stats" id="ld"></span><br /> <label>onended: </label><span class="stats" id="ndd"></span><br /> <label>onemptied: </label><span class="stats" id="mt"></span><br /> <label>onstalled: </label><span class="stats" id="stall"></span><br /> <label>onwaiting: </label><span class="stats" id="waiting"></span><br /> <label>ondurationchange: </label><span class="stats" id="dc"></span><br /> </div> </body> </html>
JS事件代碼：
var video = document.getElementById("Video1"); var vLength; var pgFlag = ""; // 用於進度跟蹤 if (video.canPlayType) { // 支持HTML5視頻測試 // 視頻的按鈕的輔助函數 播放視頻 function vidplay(evt) { if (video.src == "") { // 初始源負載 getVideo(); } if (video.paused) { // 播放文件，並顯示暫停符號 video.play(); } else { // 暫停其他文件，顯示播放符號 video.pause(); } } // 從輸入的表單地址獲取視頻文件 function getVideo() { var fileURL = document.getElementById("videoFile").value; // 得到輸入字段 if (fileURL != "") { video.src = fileURL; video.load(); // 如果HTML源元素的應用 document.getElementById("play").click(); // 開始使用 } else { errMessage("請輸入有效的視頻網址"); // 網址失敗 } } // 按鈕幫助函數 跳過向前，向后，或重新啟動 function setTime(tValue) { // 如果沒有視頻加載，這將拋出一個異常 try { if (tValue == 0) { video.currentTime = tValue; } else { video.currentTime += tValue; } } catch (err) { // 錯誤消息（ERR） 顯示異常 errMessage("視頻內容可能無法加載"); } } // 體積變化根據傳入的值 function setVol(value) { var vol = video.volume; vol += value; // 測試范圍0 - 1避免異常 if (vol >= 0 && vol <= 1) { // 如果有效的值，使用它 video.volume = vol; } else { // 在其他替代的0或1 video.volume = (vol < 0) ? 0 : 1; } } // 按鈕事件 播放 document.getElementById("play").addEventListener("click", vidplay, false); // 重新啟動 document.getElementById("restart").addEventListener("click", function() { setTime(0); }, false); // 向后跳過10秒鍾 document.getElementById("rew").addEventListener("click", function() { setTime(-10); }, false); // 向前跳過了10秒鍾 document.getElementById("fwd").addEventListener("click", function() { setTime(10); }, false); // 設置 src == 最新視頻文件的URL document.getElementById("loadVideo").addEventListener("click", getVideo, false); // 音量按鈕 document.getElementById("volDn").addEventListener("click", function() { setVol(-.1); // 下降10% }, false); document.getElementById("volUp").addEventListener("click", function() { setVol(.1); // 上升10% }, false); // 播放速度按鈕 document.getElementById("slower").addEventListener("click", function() { video.playbackRate -= .25; }, false); document.getElementById("faster").addEventListener("click", function() { video.playbackRate += .25; }, false); document.getElementById("normal").addEventListener("click", function() { video.playbackRate = 1; }, false); document.getElementById("mute").addEventListener("click", function(evt) { if (video.muted) { video.muted = false; } else { video.muted = true; } }, false); // 任何視頻錯誤會失敗的消息 video.addEventListener("error", function(err) { errMessage(err); }, true); // 內容加載，顯示按鈕和設置的事件 video.addEventListener("canplay", function() { document.getElementById("buttonbar").style.display = "block"; }, false); // 顯示視頻時長時可用 video.addEventListener("loadedmetadata", function() { vLength = video.duration.toFixed(1); document.getElementById("vLen").textContent = vLength; // 全局變量 }, false); // 顯示當前剩余時間 video.addEventListener("timeupdate", function() { // 當前時間 var vTime = video.currentTime; document.getElementById("curTime").textContent = vTime.toFixed(1); document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1); }, false); // 停下來打事件控制按鈕 video.addEventListener("pause", function() { document.getElementById("play").textContent = "播放"; }, false); video.addEventListener("playing", function() { document.getElementById("play").textContent = "暫停"; }, false); video.addEventListener("volumechange", function() { if (video.muted) { // 如果靜音，靜音imageif顯示沒有靜音，靜音的圖像顯示不 document.getElementById("mute").innerHTML = "打開"; } else { // 如果沒有靜音，靜音的圖像顯示不 document.getElementById("mute").innerHTML = "禁音"; } }, false); // 下載和播放狀態事件。 video.addEventListener("loadstart", function() { document.getElementById("ls").textContent = "開始"; }, false); video.addEventListener("loadeddata", function() { document.getElementById("ld").textContent = "數據加載"; }, false); video.addEventListener("ended", function() { document.getElementById("ndd").textContent = "播放結束"; }, false); video.addEventListener("emptied", function() { document.getElementById("mt").textContent = "視頻復位"; }, false); video.addEventListener("stalled", function() { document.getElementById("stall").textContent = "下載了"; }, false); video.addEventListener("waiting", function() { document.getElementById("waiting").textContent = "播放器等內容"; }, false); video.addEventListener("progress", function() { pgFlag += "+"; if (pgFlag.length > 10) { pgFlag = "+"; } document.getElementById("pg").textContent = pgFlag; }, false); video.addEventListener("durationchange", function() { document.getElementById("dc").textContent = "時間改變"; }, false); video.addEventListener("canplaythrough", function() { document.getElementById("cpt").textContent = "准備好了整個視頻"; }, false); } else { errMessage("HTML5 Video is required for this example"); // 結束運行 } // 顯示一個錯誤信息 function errMessage(msg) { // 顯示一個5秒錯誤消息，然后清除它 document.getElementById("errorMsg").textContent = msg; setTimeout("document.getElementById('errorMsg').textContent=''", 5000); }
項目演示地址：點擊查看