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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 如...
    挚爱已不在阅读 960评论 0 0
  • 前言: 在安卓手机上,使用video播放视频有个问题,video控件层级会永远在顶层,不利于视频互动H5开发,而I...
    vae的阅读 6,303评论 1 2
  • 十二、JavaScript的DOM特效 在web浏览器上,window对象是一个全局对象,代表web浏览器中一个打...
    刘远舟阅读 414评论 0 1
  • video 兼容问题汇总: 问题:某些手机游览器端(测试ios自带游览器会出现这种情况): 解决方案:非静音模式...
    神刀阅读 2,126评论 0 0
  • 原本链接:http://www.jianshu.com/p/404d01b8e713 前段时间写了一个基于html...
    安妮花阅读 4,251评论 0 1

友情链接更多精彩内容