原文url: 使用 HTML5 視頻事件

由這篇文章關(guān)聯(lián)出來的微軟web開發(fā)

• Web 平臺(tái)功能的 A-Z 索引
• Internet Explorer / Microsoft Edge API Reference
• JavaScript 語言參考
• html5

HTML5 視頻事件提供改進(jìn)和提高網(wǎng)頁效率的方法忽妒。

• 為什么要使用事件负乡？
• 我的網(wǎng)頁準(zhǔn)備好了么？
• 我處于什么位置晒旅？
• 現(xiàn)在該按鈕可執(zhí)行哪些操作？
• 該操作已完成？
• 相關(guān)主題

** 為什么要使用事件？ **
HTML5 視頻對(duì)象提供了很多事件背伴，這些事件可以幫助簡(jiǎn)化和增強(qiáng)網(wǎng)頁的內(nèi)容。 在此處將看到使用事件檢查內(nèi)容是否可用峰髓、視頻播放狀態(tài)以及如何在視頻中監(jiān)視當(dāng)前播放位置的示例傻寂。

** 我的網(wǎng)頁準(zhǔn)備好了么？**
對(duì)于使用視頻的網(wǎng)頁儿普，你會(huì)對(duì)兩種級(jí)別的“準(zhǔn)備”感興趣崎逃；當(dāng)加載頁面元素時(shí)以及當(dāng)可以播放內(nèi)容時(shí)。
HTML5 視頻頁面中最常用的第一個(gè)任務(wù)就是查看瀏覽器是否支持視頻眉孩。完成此操作的方法通常為：查看是否在頁面上創(chuàng)建了視頻元素个绍，以及腳本所需的屬性是否可用勒葱。如果已在文檔對(duì)象模型 (DOM) 中加載或創(chuàng)建了元素，則腳本只能檢查元素巴柿。檢查網(wǎng)頁元素是否完成加載的最好方法是在 document 對(duì)象上使用 DOMContentLoaded 事件凛虽。當(dāng)頁面元素完成加載并且基本 DOM 可用時(shí)引發(fā)此事件。 此示例為調(diào)用網(wǎng)頁的 "init()" 函數(shù)的 DOMContentLoaded 創(chuàng)建處理程序广恢。

*HTML *

//  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()" 函數(shù)封裝了頁面腳本部分的所有功能凯旋。

另一種方法是按照本主題的示例中的操作放置 <script> 部分。將加載 HTML 部分钉迷，然后加載腳本部分至非。這將確保所有的 HTML 元素均已加載。如果你在 HTML 部分加載任何內(nèi)容糠聪，你可能需要使用 onload 事件來檢查其完整性荒椭，因?yàn)橄噍^于元素，媒體所需的加載時(shí)間通常更長(zhǎng)舰蟆。

腳本部分設(shè)置多個(gè)全局變量趣惠，即 "video"、"vLength" 和 "pgFlag"身害。這些變量提供視頻對(duì)象味悄、當(dāng)前已加載的視頻的長(zhǎng)度（之后用于計(jì)算）以及用于跟蹤進(jìn)度的標(biāo)志。
*HTML *

var video = document.getElementById("Video1");
var vLength;
var pgFlag = ""; // used for progress tracking

然后塌鸯，測(cè)試視頻變量以查看 canPlayType 屬性是否可用侍瑟。如果可用，則支持 HTML5 video 元素并且執(zhí)行所有其他代碼界赔。如果不支持視頻丢习，則語句 (video.canPlayType) 將返回 False 并顯示一條消息。確認(rèn)支持視頻后淮悼，通過顯示樣式啟用輸入字段。
*HTML *

if (video.canPlayType) {   // tests that we have HTML5 video support

此時(shí)揽思，可以在輸入字段中鍵入文件并進(jìn)行加載袜腥。根據(jù)視頻文件所在的位置，如果任何網(wǎng)絡(luò)或服務(wù)器速度緩慢钉汗，則可能會(huì)在加載其余部分網(wǎng)頁時(shí)阻止準(zhǔn)備視頻羹令。以下示例使用 oncanplay 事件通知何時(shí)視頻加載內(nèi)容已足夠用于開始播放。引發(fā) oncanplay 事件時(shí)损痰，處理程序顯示播放控件以通知它已準(zhǔn)備就緒可以開始播放了福侈。
*HTML *

// content has loaded, display buttons and set up events
video.addEventListener("canplay", function () {
  document.getElementById("buttonbar").style.display = "block";
}, false);

視頻加載到視頻對(duì)象中時(shí)，要加載的首要內(nèi)容之一就是元數(shù)據(jù)卢未，它包含有關(guān)視頻的信息肪凛。以下示例使用 onloadedmetadata 事件來確定視頻有多長(zhǎng)堰汉。 當(dāng) video 對(duì)象獲取有關(guān)內(nèi)容的足夠信息以了解持續(xù)時(shí)間后，引發(fā) onloadedmetadata 事件伟墙。
*HTML *

//  display video duration when available
video.addEventListener("loadedmetadata", function () {
  vLength = video.duration.toFixed(1);
  document.getElementById("vLen").textContent = vLength; // global variable
}, false);

** 我處于什么位置翘鸭？**
上一示例顯示了如何在加載視頻后獲取視頻的持續(xù)時(shí)間或長(zhǎng)度。視頻開始播放后戳葵，可以使用 ontimeupdate 事件來獲取視頻中的當(dāng)前位置就乓。當(dāng) currentTime 屬性發(fā)生更改時(shí)，引發(fā) ontimeupdate 事件拱烁。在事件處理程序中生蚁，從視頻對(duì)象中檢索 currentTime 的值并進(jìn)行顯示。currentTime 屬性是浮點(diǎn)型變量戏自，該變量可以從 12 位中獲取小數(shù)位置守伸。但是，出于性能方面的考慮浦妄，在 Windows Internet Explorer 中一秒內(nèi)僅引發(fā)該事件四次尼摹。若要在示例中顯示，則需要使用 "toFixed()" 方法將 currentTime 取舍為一位剂娄。運(yùn)行視頻時(shí)蠢涝，會(huì)更新和顯示當(dāng)前時(shí)間。
*HTML *

//  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);

該示例還通過從持續(xù)時(shí)間中減去當(dāng)前時(shí)間來報(bào)告剩余時(shí)間阅懦。

** 現(xiàn)在該按鈕可執(zhí)行哪些操作和二？**
在視頻播放器控件中的一個(gè)常見趨勢(shì)是在兩個(gè)狀態(tài)之間切換按鈕，如“播放”****和“暫投ィ”****或者“聲音”****和“靜音”****惯吕。使用 JavaScript 控制 HTML5 視頻播放器中的示例在按鈕處理程序中實(shí)現(xiàn)該操作。例如怕午，在單擊“播放”****按鈕時(shí)废登，單擊處理程序檢查 paused 屬性并播放或暫停視頻播放。播放視頻時(shí)郁惜，它還會(huì)將該按鈕切換為暫停文本堡距，暫停視頻時(shí)將該按鈕切換為播放文本。大多數(shù)時(shí)間它都是這樣工作的兆蕉，但如果視頻元素啟用了 controls羽戒，則兩個(gè)按鈕設(shè)置無法同步。此示例顯示在播放按鈕處理程序中暫停屬性的用法虎韵。
*HTML *

//  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 事件保持按鈕同步易稠。與在單擊按鈕時(shí)只檢查暫停屬性的上一示例不同，下一示例在視頻播放狀態(tài)更改時(shí)切換按鈕包蓝，而不管按鈕如何切換驶社。
*HTML *

//  paused and playing events to control buttons
video.addEventListener("pause", function () {
  document.getElementById("play").textContent = ">";
}, false);

video.addEventListener("playing", function () {
  document.getElementById("play").textContent = "||";
}, false);

在此頁面的結(jié)尾處嘗試該示例并注意外部按鈕和視頻對(duì)象中的內(nèi)置控件如何保持同步企量。

可以對(duì) onvolumechange 事件使用相同的技術(shù)以控制靜音按鈕上的圖形。由于沒有單獨(dú)的靜音和音量事件衬吆，因此下一示例使用 onvolumechange 來處理兩個(gè)狀態(tài)梁钾。
*HTML *

video.addEventListener("volumechange", function () {
   if (video.muted) {
       // if muted, show mute image 
       document.getElementById("mute").innerHTML = "[站外圖片上傳中……(3)]";
   } else {
       // if not muted, show not muted image 
      document.getElementById("mute").innerHTML = "[站外圖片上傳中……(4)]"; 
   }
}, false);

在此示例中，引發(fā) onvolumechange 事件時(shí)逊抡，"if" 語句測(cè)試 muted 屬性姆泻。如果 video 對(duì)象的聲道為靜音，則顯示靜音圖形冒嫡；否則顯示聲音圖形拇勃。隨著圖形更改，alt 文本也會(huì)更改以提供精確描述作為輔助功能孝凌。
注意 在用戶將其鼠標(biāo)懸停在元素上方時(shí)方咆，所有按鈕、輸入元素以及視頻元素都使用 title 特性來提供工具提示蟀架。這種做法還會(huì)為屏幕讀取器設(shè)備提供標(biāo)識(shí)文本瓣赂。

** 該操作已完成横腿？**
HTML5 視頻播放器需要緩沖用于播放的內(nèi)容。如果視頻內(nèi)容較大斤寂，在頁面可能需要管理播放并發(fā)送消息以為用戶提供更好的體驗(yàn)。例如揪惦，如果下載需要的時(shí)間較長(zhǎng)遍搞，則可以使用事件來通知用戶出現(xiàn)的問題，而不只是在沒有任何說明的情況下停止視頻器腋∠常可以使用 onstalled钩杰、onwaiting 或 onended 來確定視頻中斷時(shí)的操作。 下表描述可以用來管理播放和用戶期望的事件诊县。

此代碼示例是本主題中所示示例的完整代碼酵使，它包含顯示適用于此處提到的下載和緩沖的事件的內(nèi)容荐吉。
注意 此示例使用圖像來表示聲音打開