【HTML5】HTML5中video元素事件詳解（實時監測當前播放時間）

html 代碼。。video後邊幾個元素，可處理ios 系統的兼容性

    <video   id="myVideo"    controls="controls"       poster='預覽圖'   preload="auto"    x5-playsinline="" playsinline="" webkit-playsinline=""  >
                   <source src="" type="video/mp4">
     </video>

js 代碼

<script>
//獲取視頻DOM元素
        var myVideo = document.getElementById("myVideo");

        myVideo.oncanplay = function(){
            console.log("準備就緒");    

        };
        //監聽播放開始
        myVideo.addEventListener('play',function(){
            console.log("開始播放");
        });

        //監聽播放結束
        myVideo.addEventListener('pause',function(){
            console.log("播放暫停");
        }); 

        //監聽播放結束
        myVideo.addEventListener('ended',function(){
            console.log("播放結束");
        });
            
        //使用事件監聽方式捕捉事件， 此事件可做爲實時監測video 播放狀態
        myVideo.addEventListener("timeupdate",function(){
            var timeDisplay;
            //用秒數來顯示當前播放進度
            timeDisplay = Math.floor(myVideo.currentTime);
            console.log(Math.floor(myVideo.currentTime))

            //當視頻播放到 4s的時候作處理
            if(timeDisplay == 4){
                    //處理代碼
            }
        },false);   


</script>

 

事件介紹

事件	描述
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屬性（靜音狀態）被改變