vue项目中使用video标签(弹窗提示,更新播放进度),禁止video快进

在这里插入图片描述

// 定时器,定时弹窗提醒
    tip() {
    
    
      this.tipShow = true
      this.$refs.videobox.pause()
    },
    // 弹窗,确定继续
    sure() {
    
    
      this.tipShow = false
      this.$refs.videobox.play()
    },
    // 监听video播放事件
    cPlay() {
    
    
      let that = this
      console.log('监听播放')
      this.studyProgress(
        Math.floor(that.$refs.videobox.duration),
        Math.floor(that.$refs.videobox.currentTime)
      )
      that.timer = setTimeout(() => {
    
    
        that.tip()
      }, (this.$refs.videobox.duration / 3) * 1000)
    },
    // 监听视频暂停
    cPause() {
    
    
      if (this.timer) {
    
    
        // console.log('视频暂停')
        clearTimeout(this.timer) // 暂停的时候关闭定时器
      }
    },
    // 学习进度
    studyProgress(sum, now) {
    
    
      $.post(
        '../api/course/studyInfo/update.do',
        {
    
    
          token: this.$store.state.user.token,
          courseId: this.$route.query.id,
          chapterId: this.$route.query.jie_id,
          hourSum: sum,
          useHours: now,
        },
        (res) => {
    
    
          if (res.code == 1111) {
    
    
          }
        }
      )
    },
    // 禁止视频快进
    cannotSpeed() {
    
    
      let sym
      let video = this.$refs.videobox // 获取到video
      setInterval(function () {
    
    
        let time = video.currentTime
        if (time - sym > 1) {
    
    
          video.currentTime = sym
        }
        sym = video.currentTime
      }, 500)
    },

猜你喜欢

转载自blog.csdn.net/m0_49159526/article/details/108661768