【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屬性（靜音狀態）被改變