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

JavaScript010

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()// 暂停

如果要实现点击video播放或暂停，可以使用jquery的选择器来方便选取DOM。

但要注意：jquery中并没有直接控制<video>元素播放、暂停的方法，需要用原生的JavaScript代码来控制。

如果是使用的HTML5的video 标签，可以取到播放器即可实现。

var Media = document.getElementById("media")

Media.play()//播放

Media.pause()//暂停