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

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 () {
      
})