HTML5 video 事件

最新推荐文章于 2024-09-23 14:58:08 发布

John的WEB前端学习日记

最新推荐文章于 2024-09-23 14:58:08 发布

阅读量2.4k

点赞数 1

分类专栏： HTML5 文章标签： html5 video javascript

HTML5 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

使用 HTML5 video 事件

HTML5 video 事件提供簡化網頁與增加網頁效率的方法。

為什麼使用事件？

HTML5 video 物件提供數種可以簡化和增強網頁內容的事件。下列範例是關於使用事件查看內容是否可用、視訊播放的狀態，以及如何監控視訊的目前播放位置。

我的網頁是否已準備就緒？

對於使用視訊的網頁，有兩個與您相關的「就緒」等級；一個是當網頁元素載入時，另一個是當內容可以播放時。

在 HTML5 video 網頁中最常見的首要工作，是檢查瀏覽器是否支援視訊。要完成這項工作，通常是檢查網頁上的 video 元素是否已建立，以及指令碼需要的屬性是否可用。只有當元素已載入或已在文件物件模型 (DOM) 中建立時，指令碼才能檢查元素。檢查網頁元素是否完成載入的最佳方法，是在 document 物件上使用DOMContentLoaded 事件。當網頁元素完成載入且基本 DOM 可用時，就會觸發這個事件。下列範例建立 DOMContentLoaded 的處理常式，會呼叫網頁的 "init()" 函式。

HTML

        document.addEventListener("DOMContentLoaded", function () {
            init();
        }, false);

範例的 "init()" 函式封裝了網頁的指令碼部分的所有功能。"init()" 函式設定數個全域變數："video"、"vLength" 以及 "pgFlag"。這些變數提供 video 物件、目前載入的視訊長度 (用於後續的計算) 以及進度追蹤使用的旗標。

HTML

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

然後會測試 video 變數，以查看 canPlayType 屬性是否可用。如果可用，則支援 HTML5 video 元素，並會執行其他所有的程式碼。如果不支援視訊，陳述式 (video.canPlayType) 會傳回 False，並顯示一則訊息。確認視訊支援後，輸入欄位會透過顯示樣式啟用。

HTML

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

                //  show the input field and load button 
                document.getElementById("inputField").style.display = "block";

此時可以輸入檔案到輸入欄位，並載入檔案。依據視訊檔案所在位置而定，當網頁的其餘部分已經就緒時，緩慢的網路或伺服器處理速度可能會影響視訊播放。下列範例使用 oncanplay 事件來分辨載入的視訊是否已經可以開始播放。當 oncanplay 事件觸發時，處理常式會顯示播放控制項，通知視訊已可播放。

HTML

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

當視訊載入到 video 物件時，首要工作之一是載入包含視訊相關資訊的中繼資料。下列範例使用 onloadedmetadata 事件判斷視訊的長度。當 video 物件取得持續時間內容的足夠資訊後，就會觸發 onloadedmetadata 事件。

HTML

//  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 四捨五入到一位數。當視訊執行時，就會更新並顯示目前時間。

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

這個範例也會從持續時間減去目前時間，以報告剩餘的時間。

該按鈕現在執行什麼動作？

視訊播放程式控制項的常見趨勢是在兩個狀態之間切換，像是 [播放] 與 [暫停] 或 [聲音] 與 [靜音]。使用 JavaScript 控制 HTML5 視訊播放程式中的範例會在按鈕處理常式中執行這項動作。例如，當您按一下 [播放] 按鈕時，按一下處理常式會檢查 paused 屬性，然後播放或暫停視訊播放。當視訊播放時，它也會將按鈕切換成暫停文字，在視訊暫停時則切換成播放文字。這項功能大部分都有用，但如果 video 元素已啟用 controls，兩個按鈕設定可能會不同步。這個範例顯示在播放按鈕處理常式中使用 paused 屬性。

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 事件保持按鈕同步。與按下按鈕時只檢查 paused 屬性的先前範例不同，下一個範例會在視訊播放狀態變更 (無論如何發生) 時切換按鈕。

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

請嘗試這個頁面最後的範例，注意外部按鈕與 video 物件內建的控制項如何保持同步。

同樣的技術可以配合 onvolumechange 事件使用，以控制 [靜音] 按鈕上的圖形。因為沒有個別的靜音與音量事件，下一個範例使用 onvolumechange 處理這兩種狀態。

HTML

video.addEventListener("volumechange", function () {
    if (video.muted) {
        // if muted, show mute image
        document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />"
    } else {
        // if not muted, show not muted image
        document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />"
    }
}, false);

在這個範例中，當 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 之前觸發。

這個程式碼範例是本主題所顯示範例的完整程式碼，並且包含顯示事件的區段，這些事件套用至這裡所提及的下載與緩衝處理。

附註這個範例使用聲音開啟 vol2.png 聲音開啟按鈕圖形和聲音關閉 mute2.png 聲音關閉按鈕圖形的影像。

HTML

<html >
  <head>
    <title>Video events example</title>
    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->    
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            init();
        }, false);

        function init() {        // Master function, encapsulates all functions
            var video = document.getElementById("Video1");
            var vLength;
            var pgFlag =""; // used for progress tracking
            if (video.canPlayType) {   // tests that we have HTML5 video support

                //  show the input field and load button 
                document.getElementById("inputField").style.display = "block";

                //  video button helper functions
                //  play video
                function vidplay(evt) {
                    if (video.src == "") {  // inital source load
                        getVideo();
                    }
                    if (video.paused) {   // play the file, and display pause symbol
                        video.play();
                    } else {              // pause the file, and display play symbol  
                        video.pause();
                    }
                }


                //  load video file from input field
                function getVideo() {
                    var fileURL = document.getElementById("videoFile").value; // get input field                    
                    if (fileURL != "") {
                        video.src = fileURL;
                        video.load();  // if HTML source element is used
                        document.getElementById("play").click();  // start play
                    } else {
                        errMessage("Enter a valid video URL");  // fail silently
                    }
                }


                //  button helper functions 
                //  skip forward, backward, or restart
                function setTime(tValue) {
                    //  if no video is loaded, this throws an exception 
                    try {
                        if (tValue == 0) {
                            video.currentTime = tValue;
                        }
                        else {
                            video.currentTime += tValue;
                        }

                    } catch (err) {
                        // errMessage(err) // show exception
                        errMessage("Video content might not be loaded");
                    }
                }

                // change volume based on incoming value 
                function setVol(value) {
                    var vol = video.volume;
                    vol += value;
                    //  test for range 0 - 1 to avoid exceptions
                    if (vol >= 0 && vol <= 1) {
                        // if valid value, use it
                        video.volume = vol;
                    } else {
                        // otherwise substitute a 0 or 1
                        video.volume = (vol < 0) ? 0 : 1;
                    }
                }
                //  button events               
                //  Play
                document.getElementById("play").addEventListener("click", vidplay, false);
                //  Restart
                document.getElementById("restart").addEventListener("click", function () {
                    setTime(0);
                }, false);
                //  Skip backward 10 seconds
                document.getElementById("rew").addEventListener("click", function () {
                    setTime(-10);
                }, false);
                //  Skip forward 10 seconds
                document.getElementById("fwd").addEventListener("click", function () {
                    setTime(10);
                }, false);
                //  set src == latest video file URL
                document.getElementById("loadVideo").addEventListener("click", getVideo, false);

                // volume buttons
                document.getElementById("volDn").addEventListener("click", function () {
                    setVol(-.1); // down by 10%
                }, false);
                document.getElementById("volUp").addEventListener("click", function () {
                    setVol(.1);  // up by 10%
                }, false);

                // playback speed buttons
                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);

                //  any video error will fail with message 
                video.addEventListener("error", function (err) {
                    errMessage(err);
                }, true);

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

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

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

                video.addEventListener("volumechange", function () {
                    if (video.muted) {
                        // if muted, show mute image
                        document.getElementById("mute").innerHTML = "<img alt='volume off button' src='mute2.png' />"
                    } else {
                        // if not muted, show not muted image
                        document.getElementById("mute").innerHTML = "<img alt='volume on button' src='vol2.png' />"
                    }
                }, false);
                //  Download and playback status events.
                video.addEventListener("loadstart", function () {
                    document.getElementById("ls").textContent = "Started";
                }, false);
                video.addEventListener("loadeddata", function () {
                    document.getElementById("ld").textContent = "Data was loaded";
                }, false);

                video.addEventListener("ended", function () {
                    document.getElementById("ndd").textContent = "Playback ended";
                }, false);

                video.addEventListener("emptied", function () {
                    document.getElementById("mt").textContent = "Video reset";
                }, false);

                video.addEventListener("stalled", function () {
                    document.getElementById("stall").textContent = "Download was stalled";
                }, false);
                video.addEventListener("waiting", function () {
                    document.getElementById("waiting").textContent = "Player waited for content";
                }, 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 = "Duration has changed";
                }, false);

                video.addEventListener("canplaythrough", function () {
                    document.getElementById("cpt").textContent = "Ready to play whole video";
                }, false);

            } else {
                errMessage("HTML5 Video is required for this example");
                // end of runtime
            }
            //  display an error message 
            function errMessage(msg) {
                // displays an error message for 5 seconds then clears it
                document.getElementById("errorMsg").textContent = msg;
                setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
            }
        }// end of master         
    </script>
    
    </head>
    <body >        

    <div id= "inputField" style="display:none;" >
        <label>Type or paste a video URL: <br/>
        <input type="text" id="videoFile" style="width: 300px;"  title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />        
        <button id="loadVideo" title="Load video button" >Load</button>
        </label>
    </div>    
    <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" title="Restart button">[]</button> 
        <button id="slower" title="Slower playback button">-</button>
        <button id="rew" title="Rewind button" >&lt;&lt;</button>
        <button id="play" title="Play button">&gt;</button>
        <button id="fwd" title="Forward button" >&gt;&gt;</button>
        <button id="faster" title="Faster playback button">+</button>
        <button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>     
        <br />
        <label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>           
        <br />
        <label>  Volume: </label>
            <button id="volDn"  title="Volume down button">-</button>
            <button id="volUp"  title="Volume up button">+</button>
        <br />
        <div id="status" >Length(seconds): <span id="vLen"></span> <br />
        Current time:  <span id="curTime" title="Current time"></span><br />   Remaining time: <span id="vRemaining" title="Remaining time"></span></div>
    </div>   
    <br/>  

    <div title="Error message area" id="errorMsg" style="color:Red;"></div>  
    <div title="Event status area" >
      <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>