vue实时监控视频播放的进度，并在播放80%位置触发相应操作

原创已于 2024-02-21 17:43:53 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #音视频 #javascript

于 2024-02-21 17:43:40 首次发布

VUE 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue中使用video标签触发canplay事件，以及如何在canplay事件中获取视频时长并监听播放、暂停等状态。作者展示了如何绑定this和使用addEventListener进行时间更新监控。

video标签：播放时触发canplay事件

<video
         :src="filePath"
         controls
         v-if="filePrefix == 'mp4' || filePrefix == 'avi'"
         @canplay="getVideoDur()"
         id="myVideo"
        class="preview">
 </video>

canplay触发的方法：bind(this)用于当前监听的函数里面获取当前vue的this对象，不使用bind则this为当前的video对象

getVideoDur(){
      var video = document.getElementById("myVideo")
      video.addEventListener(
          "timeupdate",
          function () {
              var timeDisplay;
              var duration;
              //用秒数来显示当前播放进度
              timeDisplay = video.currentTime;
              duration = video.duration;
              console.log("总时长的80%", duration*0.8);
              console.log("当前播放的时长", timeDisplay);
              if (timeDisplay > duration*0.8) {
                  console.log("已超过总时长的80%");
                  this.changeReadedStatus(this.curFileInfo)
                  return;
              }
          }.bind(this),
          false
      );
  },

video的其他监听type：

//监听播放后时间变动
video.addEventListener("timeupdate", function () {
       
})
//监听播放
video.addEventListener("play", function () {
       
})
 //监听暂停 
video.addEventListener("pause", function () {
      
})