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

95 阅读 0 评论 63 点赞

我是靠谱客的博主无辜小兔子，这篇文章主要介绍Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理，现在分享给大家，希望可以做个参考。

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<video id="myVideo" controls="controls">
    <source type="video/mp4" src="mi.mp4">
</video>

<script>
	function videoInit(){
        let elevideo = document.getElementById('myVideo');
        elevideo.addEventListener('loadedmetadata', () => {
            //视频的总长度
            console.log('总长度:' + elevideo.duration);
            clearInterval(this.timer);
        });
        elevideo.addEventListener('play', () => {
            //播放开始执行的函数
            console.log('开始播放');
        });
        elevideo.addEventListener('playing', () => {
            //播放中
            console.log('播放中');
            this.timer = setInterval(() => {
                console.log('播放进度:' + parseFloat(elevideo.currentTime));
            }, 100);
        });
        elevideo.addEventListener(
            'ended',
            () => {
                //结束
                console.log('播放结束');
                clearInterval(this.timer);
            },
            false
        );
    };
</script>