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

JavaScript019

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)

JS直接使用 JavaScript 来操作即可，需要用原生的JavaScript代码来控制。

举例（例如页面上有1个video）：

<video id="myVideo" src="1.webm" controls />

则对应的脚本代码为：

/* JS代码 */

document.getElementById('myVideo').play()// 播放

document.getElementById('myVideo').pause()// 暂停

/* jQuery代码 */

$('#myVideo').play()// 播放

$('#myVideo').pause()// 暂停

你这个得通过播放器来控制吧 ，如果你是用的播放器的话。

具体的函数调用不太清楚，无非就是判断下是否登录，如果已登录则停止播放；

这里提供下 H5 VIDEO 的函数：

获得video对象后，可以通过调用pause()函数来暂停播放。