JS自定義Video的播放按鈕并監聽該事件

自定義video标簽播放封面按鈕

<video width="628" height="375" id="video" poster="img/video.png" autoplay="autoplay" preload="none" controls="controls">
    <source src="img/video.mp4" />
</video>
<p class="playBtn" id="playBtn"><img src="img/play.png" alt="播放"></p>
           

綁定點選播放事件

//video自定義播放事件
    let video=document.getElementById("video");
    video.pause();
    $("#playBtn").on('click',function(){
        video.play();
        //$(this).hide();
    });
           

監聽video其他事件

1. 視訊播放事件監聽

//視訊播放事件監聽
    video.addEventListener('play', function () { //播放開始執行的函數
        console.log("開始播放");
        $("#playBtn").hide();
    });
           

2.視訊暫停事件監聽

video.addEventListener('pause', function () { //暫停開始執行的函數
        console.log("暫停播放");
        $("#playBtn").show();
    });
           

3.視訊加載後擷取視訊的長度

video.addEventListener('loadedmetadata', function () { //加載資料
        //視訊的總長度
        console.log(elevideo.duration);
    });
           

4.視訊正在播放中

video.addEventListener('playing', function () { //播放中
       console.log("播放中");
    });
           

5.視訊加載中

video.addEventListener(‘waiting‘, function () { //加載
        console.log("加載中");
    });
           

6.視訊結束播放

video.addEventListener(‘ended‘, function () { //結束
        console.log("播放結束");
    }, false);