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

这篇具有很好参考价值的文章主要介绍了HTML5中video元素事件详解（实时监测当前播放时间）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 播放状态
  myVideo.addEventListener("timeupdate",function(){
    var timeDisplay;
  
    //用秒数来显示当前播放进度
    timeDisplay = Math.floor(myVideo.currentTime);
    console.log(Math.floor(myVideo.currentTime));

    //当视频播放到 4s的时候做处理
    if(timeDisplay == 4){
      //处理代码
    }
  },false);
</script>

事件介绍

事件	描述
loadstart	浏览器开始在网上寻找媒体数据
progress	浏览器正在获取媒体数据
suspend	浏览器暂停获取媒体数据，但是下载过程并滑正常结束
abort	浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的
error	获取媒体数据过程中出错
emptied	video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时，又调用了load方法重新载入媒体
stalled	浏览器尝试获取媒体数据失败
play	即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性
pause	播放暂停，当执行了pause方式时触发
loadedmetadata	浏览器获取完毕媒体的时间长和字节数
waiting	播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧
canplay	浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲
canplaythrough	浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲
seeking	seeking属性变为true，浏览器正在请求数据
seeked	seeking属性变为false，浏览器停止请求数据
timeupdate	由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
ended	播放结束后停止播放
ratechange	defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变
druationchange	播放时长被改变
volumechange	volume属性（音量）被改变或muted属性（静音状态）被改变