【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>

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

　　

事件介紹

原帖地址：https://www.cnblogs.com/richerdyoung/p/10701838.html