JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理

JavaScript017

JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理,第1张

 (1)HTML页面视频标签大体如下

<video id="video"controls="controls">

<source src="./video/2.mp4" type="video/mp4" />

</video>

(2)视频加载后获取视频的长度

varelevideo = document.getElementById("video")

    elevideo.addEventListener('loadedmetadata', function () {//加载数据

        //视频的总长度        console.log(elevideo.duration)

    })

(3)视频开始播放

varelevideo = document.getElementById("video")

    elevideo.addEventListener('play', function () {//播放开始执行的函数

        console.log("开始播放")

    })

(4) 视频正在播放中

varelevideo = document.getElementById("video")

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

    })

(5)视频加载中

varelevideo = document.getElementById("video")

    elevideo.addEventListener('waiting', function () {//加载

        console.log("加载中")

    })

(6)视频暂停播放

varelevideo = document.getElementById("video")

    elevideo.addEventListener('pause', function () {//暂停开始执行的函数

        console.log("暂停播放")

    })

(7)视频结束播放

varelevideo = document.getElementById("video")

    elevideo.addEventListener('ended', function () {//结束

        console.log("播放结束")

    }, false)

elevideo.addEventListener('loadedmetadata', function () { 

    //加载数据//视频的总长度console.log(elevideo.duration) 

 })

elevideo.addEventListener('play', function () { 

    //播放开始执行的函数console.log("开始播放") 

 })

elevideo.addEventListener('playing', function () { 

    //播放中 console.log("播放中")

})

elevideo.addEventListener('waiting', function () {

     //加载console.log("加载中") 

 })

elevideo.addEventListener('pause', function () {

     //暂停开始执行的函数console.log("暂停播放") 

 })

elevideo.addEventListener('ended', function(){

     //结束console.log("播放结束") 

 }, false)