HTML5中video元素事件详解（实时监测当前播放时间）

最新推荐文章于 2025-03-11 15:20:24 发布

Goaread

最新推荐文章于 2025-03-11 15:20:24 发布

阅读量4.8k

点赞数 2

分类专栏：前端文章标签： html5 前端 html

本文链接：https://blog.csdn.net/godread_cn/article/details/129659694

版权

html 代码：

video后边几个元素，可处理ios 系统的兼容性

<video id="myVideo" controls="controls" poster='预览图' preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="">
    <source src="" type="video/mp4">
</video>

js 代码：

<script>
  //获取视频DOM元素
  var myVideo = document.getElementById("myVideo");

  myVideo.oncanplay = function(){
    console.log("准备就绪");
  };
 
  //监听播放开始
  myVideo.addEventListener('play',function(){
    console.log("开始播放");
  });

  //监听播放结束
  myVideo.addEventListener('pause',function(){
    console.log("播放暂停");
  });

  //监听播放结束
  myVideo.addEventListener('ended',function(){
    console.log("播放结束");
  });
            
  //使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态
  my