video视频标签播放视频时点击或拖拽进度条事件

在HTML中，<video> 元素提供了多种与视频播放相关的事件，但直接针对鼠标拖拽或点击进度条的事件并不存在。不过，我们可以通过监听 <video> 元素的 timeupdate 事件来间接实现这一需求。

HTML

<video id="videoNode" width="100%" height="100%" controls>  
  <source :src="videoUrl" type="video/webm">  
</video>  
//videoUrl可在浏览器中直接播放

JS

import _ from "lodash";

data() {
  return {
      videoTimer: null,
    };
},

methods:{
   videoEvent() {
      this.$nextTick(() => {
        let previousTime = 0;
        let video = document.getElementById("videoNode");
        if (!video) return;
        video.addEventListener("timeupdate", () => {
          let currentTime = video.currentTime; //当前视频的播放时刻
          let isPaused=video.paused;
          if (previousTime !== 0) {
            let timeDiff = currentTime - previousTime; //时间差
            if(timeDiff == 0){
              return
            }
            if(isPaused || currentTime !=0){ //currentTime!=0按住键盘后退键时，避免重复调接口
              this.getDataFn(currentTime)
            } else if(currentTime ==0){
               this.initVideoList();
            }                 
            if (!this.videoTimer && !isPaused) {
              this.videoTimer = setInterval(() => {
                this.getInfoFromVideo(video.currentTime);
              }, 5000);
            }
          } else if(currentTime > 1) {
            this.getDataFn(currentTime); //视频一开始在0:00处，如果直接点击进度条，则请求一次数据
          }
          previousTime = currentTime;
        });
        video.addEventListener("ended", () => {
            this.clearVideoTimer();
          });
        video.addEventListener("error", () => {
            this.clearVideoTimer();
          });
        video.addEventListener("pause", () => {
            this.clearVideoTimer();
          });
      });
    },
    getDataFn(currentTime){
      this.getInfoFromVideo(currentTime)
    },
    getInfoFromVideo: _.debounce(function () {
      this.getPersonInfo(time);
    }, 200),
    getPersonInfo(time) {
      console.log("在此处发送axios请求,time为请求入参", time);
    },
    clearVideoTimer() {
      if (this.videoTimer) {
        clearInterval(this.videoTimer);
        this.videoTimer = null;
      }
    },
    initVideoList(){
      console.log('当视频当前时间是0时')
    }
}

以上代码解决了如下需求

视频播放过程中，每隔5秒请求一次接口；当鼠标拖动或点击进度条前进或后退时，也请求一次接口，请求入参均为当前视频的播放时间（时刻）。注意鼠标拖动进度条时的接口防抖处理。