video 标签实现进度条不可拖动，并监听观看状态、超时触发挂机验证

需求：用户观看视频时，实时监听观看状态，超过一定时长后，触发挂机验证，并禁止拖动滚动条快进查看。

技术：主要是用html5的vidoe标签做的，用到了自带的暂停（pause）、播放（play）、监听（timeupdate）等事件

html：

javascript：

data () {
    return {
      videoUrl: '',
      video: {
        currTime: '',
        maxTime: '',
        tipsTime: 0, // 出现继续查看的提示描述时长
        tipsTimer: null,
        studyTime: 0, // 计算学分的时长
        studyTimer: null
      },
      targetVideo: null
    }
},
methods: {
    timeupdate (e) {
      if (e.srcElement.currentTime - this.video.currTime > 1) {
        e.srcElement.currentTime = this.video.currTime > this.video.maxTime ? this.video.currTime : this.video.maxTime;
        this.$message.error('视频进度条不可拖动');
        return
      }
      this.video.currTime = e.srcElement.currentTime;
      this.video.maxTime = this.video.currTime > this.video.maxTime ? this.video.currTime : this.video.maxTime;
    },
    // 停止播放
    handlePause (val) {
      this.intervalEnd()
    },
    // 开始播放
    handlePlay (val) {
      this.targetVideo = val;
      // target.duration总时长；target.currentTime：当前时长
      // 计算时长
      this.caculateTips()
    },
    caculateTips () {
      if (this.video.tipsTimer) return;
      this.video.tipsTime = 10; // 10秒提醒一次
      this.video.tipsTimer = setInterval(() => {
        if (this.video.tipsTime > 0) {
          this.video.tipsTime -= 1;
        } else {
          const video = this.$refs.media;
          if (video) {
            video.pause();
          }
          this.$alert('已触发挂机验证，请点击“确定”，否则学习将被停止', '提示', {
            confirmButtonText: '确定',
            showClose: false, // 不显示右上角关闭按钮
            callback: action => {
              clearInterval(this.video.tipsTimer);
              this.video.tipsTimer = null;
              if (video) {
                video.play();
              }
            }
          });
        }
      }, 1000)
    },
    // 清除轮询
    intervalEnd () {
      clearInterval(this.video.tipsTimer);
      this.video.tipsTimer = null;
    },
}