学习使用js得到视频时长和播放时长

最新推荐文章于 2024-08-31 18:20:27 发布

原创最新推荐文章于 2024-08-31 18:20:27 发布 · 3.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #音视频

Html 同时被 2 个专栏收录

262 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

本文介绍了一种使用HTML5的video标签实现的前端视频播放器，并通过JavaScript添加了多种事件监听器来控制播放状态，如播放、暂停、进度显示等。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放mp4格式视频</title>

</head>
<body>

<div>
 

    <video id="myVideo" controls="controls">
        <source type="video/mp4" src="https://www.qipa250.com/uploadedqrcode/qipa250.mp4">
    </video>

</div>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

<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>

在这里插入图片描述