js获取视频总时长,监听播放进度

2022-05-19 15:32:54 阅读：374 来源： 互联网

标签：console log 总时长 elevideo timer js addEventListener 播放监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>播放时长</title>
</head>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<video id="myVideo" controls="controls">
    <source type="video/mp4" src="C:\Users\Administrator\Downloads\2923395-1.mp4">
</video>

<script>
    function videoInit(){
        let elevideo = document.getElementById('myVideo');
        elevideo.addEventListener('waiting', function () { //加载
            console.log("加载中");
        });
        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));
            }, 1000);
        });
        elevideo.addEventListener('pause', ()=> { //暂停开始执行的函数
            console.log("暂停播放");
            clearInterval( this.timer);
        });
        elevideo.addEventListener(
            'ended',
            () => {
                //结束
                console.log('播放结束');
                clearInterval(this.timer);
            },
            false
        );
    };
    videoInit()
</script>

</body>
</html>

原文地址:https://blog.csdn.net/weixin_41827052/article/details/123639686

标签：console,log,总时长,elevideo,timer,js,addEventListener,播放,监听
来源： https://www.cnblogs.com/junyi-bk/p/16288679.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js获取视频总时长,监听播放进度