使用 HTML5 video 事件
使用 HTML5 video 事件
HTML5 video 事件提供簡化網頁與增加網頁效率的方法。
為什麼使用事件?
HTML5 video 物件提供數種可以簡化和增強網頁內容的事件。 下列範例是關於使用事件查看內容是否可用、視訊播放的狀態,以及如何監控視訊的目前播放位置。
我的網頁是否已準備就緒?
對於使用視訊的網頁,有兩個與您相關的「就緒」等級;一個是當網頁元素載入時,另一個是當內容可以播放時。
在 HTML5 video 網頁中最常見的首要工作,是檢查瀏覽器是否支援視訊。要完成這項工作,通常是檢查網頁上的 video 元素是否已建立,以及指令碼需要的屬性是否可用。只有當元素已載入或已在文件物件模型 (DOM) 中建立時,指令碼才能檢查元素。檢查網頁元素是否完成載入的最佳方法,是在 document 物件上使用 DOMContentLoaded 事件。當網頁元素完成載入且基本 DOM 可用時,就會觸發這個事件。 這個範例建立 DOMContentLoaded 的處理常式,會呼叫網頁的 "init()" 函式。
// When the HTML elements load, call init() document.addEventListener("DOMContentLoaded", init, false); // Rotate the video by 30degrees when image is clicked function init() { var video = document.getElementById("theVideo"); if (video) { var rotateVal = 0; // Global variable to hold current rotation value document.getElementById("rotateVideo").addEventListener("click", function () { rotateVal = (rotateVal += 30) % 360; // Calculate the next value, but keep between 0 and 360 var temp = "rotate(" + rotateVal + "deg)"; // Create a style string document.getElementById("theVideo").style.msTransform = temp; // Set the style }, false); } }
範例的 "init()" 函式封裝了網頁的指令碼部分的所有功能。
另一個方法是,依照本主題的範例放置 <script> 區段。載入 HTML 部分後,載入 script 區段。這樣可確保載入所有的 HTML 元素。如果您在 HTML 區段載入任何內容,可能需要使用 onload 事件來檢查是否已經完成,因為媒體載入的時間通常比元素長。
script 區段設定數個全域變數:"video"、"vLength" 以及 "pgFlag"。這些變數提供 video 物件、目前載入的視訊長度 (用於後續的計算) 以及進度追蹤使用的旗標。
var video = document.getElementById("Video1"); var vLength; var pgFlag = ""; // used for progress tracking
然後會測試 video 變數,以查看 canPlayType 屬性是否可用。如果可用,則支援 HTML5 video 元素,並會執行其他所有的程式碼。如果不支援視訊,陳述式 (video.canPlayType) 會傳回 False,並顯示一則訊息。確認視訊支援後,輸入欄位會透過顯示樣式啟用。
if (video.canPlayType) { // tests that we have HTML5 video support
此時可以輸入檔案到輸入欄位,並載入檔案。依據視訊檔案所在位置而定,當網頁的其餘部分已經就緒時,緩慢的網路或伺服器處理速度可能會影響視訊播放。下列範例使用 oncanplay 事件來分辨載入的視訊是否已經可以開始播放。當 oncanplay 事件觸發時,處理常式會顯示播放控制項,通知視訊已可播放。
// content has loaded, display buttons and set up events video.addEventListener("canplay", function () { document.getElementById("buttonbar").style.display = "block"; }, false);
當視訊載入到 video 物件時,首要工作之一是載入包含視訊相關資訊的中繼資料。下列範例使用 onloadedmetadata 事件判斷視訊的長度。 當 video 物件取得持續時間內容的足夠資訊後,就會觸發 onloadedmetadata 事件。
// display video duration when available video.addEventListener("loadedmetadata", function () { vLength = video.duration.toFixed(1); document.getElementById("vLen").textContent = vLength; // global variable }, false);
目前的播放進度?
上一個範例顯示在視訊載入後如何取得視訊的持續時間或長度。在視訊開始播放後,可以使用 ontimeupdate 事件取得目前在視訊中的位置。當 currentTime 屬性變更時,會觸發 ontimeupdate 事件。在事件處理常式中,會從 video 物件抓取 currentTime 的值並顯示。currentTime 屬性是浮點變數,可取到 12 位數的小數位數。不過,基於效能考量,這個事件在 Windows Internet Explorer 中每秒只會觸發四次。如範例中所示,使用 "toFixed()" 方法將 currentTime 四捨五入到一位數。當視訊執行時,就會更新並顯示目前時間。
// display the current and remaining times video.addEventListener("timeupdate", function () { // Current time var vTime = video.currentTime; document.getElementById("curTime").textContent = vTime.toFixed(1); document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1); }, false);
這個範例也會從持續時間減去目前時間,以報告剩餘的時間。
該按鈕現在執行什麼動作?
視訊播放程式控制項的常見趨勢是在兩個狀態之間切換,像是 [播放] 與 [暫停] 或 [聲音] 與 [靜音]。使用 JavaScript 控制 HTML5 視訊播放程式中的範例會在按鈕處理常式中執行這項動作。例如,當您按一下 [播放] 按鈕時,按一下處理常式會檢查 paused 屬性,然後播放或暫停視訊播放。當視訊播放時,它也會將按鈕切換成暫停文字,在視訊暫停時則切換成播放文字。這項功能大部分都有用,但如果 video 元素已啟用 controls,兩個按鈕設定可能會不同步。這個範例顯示在播放按鈕處理常式中使用 paused 屬性。
// play video
function vidplay(evt) {
if (video.src == "") { // inital source load
getVideo();
}
button = evt.target; // get the button id to swap the text based on the state
if (video.paused) { // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else { // pause the file, and display play symbol
video.pause();
button.textContent = ">";
}
}
較佳的方法是使用 onpause 與 onplaying 事件保持按鈕同步。與按下按鈕時只檢查 paused 屬性的先前範例不同,下一個範例會在視訊播放狀態變更 (無論如何發生) 時切換按鈕。
請嘗試這個頁面最後的範例,注意外部按鈕與 video 物件內建的控制項如何保持同步。
同樣的技術可以配合 onvolumechange 事件使用,以控制 [靜音] 按鈕上的圖形。因為沒有個別的靜音與音量事件,下一個範例使用 onvolumechange 處理這兩種狀態。
在這個範例中,當 onvolumechange 事件觸發時,"if" 陳述式會測試 muted 屬性。如果 video 物件的音軌已靜音,會顯示靜音圖形;否則會顯示聲音圖形。當圖形變更時,alt 文字也會變更,以提供正確的協助工具說明。
附註 當使用者將滑鼠暫留在元素上時,所有按鈕、輸入元素及 video 元素都會使用 title 屬性提供工具提示。這個做法也可為螢幕助讀程式裝置提供識別文字。
是否完成了?
HTML5 視訊播放程式需要緩衝處理內容才能播放。如果視訊內容過大,您的網頁可能需要管理播放與傳訊,才能提供使用者良好的經驗。例如,如果下載時間過長,您可以使用事件警告使用者發生問題,而非只停止視訊卻沒有說明。onstalled、onwaiting 或 onended 可用來決定視訊中斷時的動作。 下表描述可用來管理播放的事件和您的使用者預期結果。
事件 | 說明 |
---|---|
oncanplaythrough | 在不需要進一步緩衝處理就能播放到檔案結尾時觸發。 |
onloadstart | 在 Internet Explorer 開始尋找媒體資料時觸發。這會在從網站要求視訊 (或音訊) 資源時發生,而且每個要求只會發生一次。 |
onloadeddata | 當媒體資料在目前的播放位置載入時觸發。視訊可以開始播放。 |
onended | 在到達播放結尾時觸發。 |
onemptied | 在 video 物件重設為其初始狀態時觸發。 |
onstalled | 當下載中斷超過三秒時觸發。這可能表示有網路問題。 |
onwaiting | 在因為無法取得下一個視訊畫面 (可能正在緩衝處理) 而停止播放時觸發。 |
onprogress | 在下載媒體內容期間觸發以表示進度。當下載完成後停止觸發。 |
ondurationchange | 緊接在 onloadstart 之後、onloadedmetadata 之前觸發。 |
這個程式碼範例是本主題所顯示範例的完整程式碼,並且包含顯示事件的區段,這些事件適用於這裡所提及的下載與緩衝處理。
附註 這個範例使用聲音開啟 和聲音關閉
的影像。