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

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

作者: 一叶孤舟1990 | 来源:发表于2020-11-10 13:52 被阅读0次

     (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);

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/hpcjbktx.html