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

JavaScript023

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)

1, IE 浏览器(360安全浏览器只是在IE浏览器的基础上加了一个马甲,使用的是相同的flash插件)和火狐浏览器是不同内核的浏览器,目前还没有同时可以兼容的flash插件。

2,无论是什么浏览器,如果缺少相应的flash插件,在打开视频网页时,浏览器会自动提示安装。

3,火狐浏览器的flash插件如果先于浏览器安装(如:卸载过火狐,但是flash插件还在),可能会出现火狐浏览器无法发现并调用flash插件,需要先卸载这个非 IE 内核的flash播放器,再打开视频网页,安装提示安装。