video 标签播放、暂停、结束等事件

最新推荐文章于 2024-10-14 14:56:50 发布

转载最新推荐文章于 2024-10-14 14:56:50 发布 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/c_qianxia5040/article/details/113441476

文章标签：

#前端 #javascript #开发语言

video 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用JavaScript获取HTML5视频元素的总时长，并通过事件监听器实现视频播放状态的监控，包括播放、暂停、结束等关键事件。

<video id="video" controls="controls">
    <source type="video/mp4" src="xxx.mp4">
</video>

获取视频总时长

var elevideo = document.getElementById("video");
    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);

转载:https://blog.youkuaiyun.com/c_qianxia5040/article/details/113441476