uniapp频繁触发timeupdate在真机上视频会一直转圈圈

Question

频繁触发timeupdate在真机上视频会一直转圈圈，timeupdate里面写了未观看部分禁止拖动进度条的逻辑,这个要怎么处理，求解答

<video id="player" class="video" :src="videoUrl" @timeupdate="timeupdate" @play="play"  
                    @pause="pause"></video>  

    play() {  
                if (!this.firstPlay) {  
                    this.firstPlay = true  
                    this.videoContext.seek(this.nowTime)  
                    console.log(this.nowTime, 'nowTime')  
                }  
                this.playing = true  
                // clearInterval(this.timer)  
                // this.timer = null  
                this.timer = setInterval(() => {  
                    请求视频进度接口  
                }, 5000)  
            },  
            pause() {  
                console.log('pause')  
                this.playing = false  
                clearInterval(this.timer)  
                this.timer = null  
                请求视频进度接口  
            },  
    timeupdate(e) {  
                // this.lastTime = e.detail.currentTime  
                var nextTime = e.detail.currentTime  
                //往右边拖动进度条  
                if (nextTime > this.lastTime + 2) {  
                    clearInterval(this.timer)  
                    this.timer = null  
                    // 不能超过最大观看时间  
                    if (nextTime > this.maxTime) {  
                        // 强制拉回最大观看时间  
                        this.videoContext.seek(this.maxTime)  
                        return  
                    }  
                }  
                this.lastTime = nextTime  
                this.maxTime = Math.max(this.maxTime, this.lastTime)  
            },

Answer 1

该回复引自免费微信小程序-皆我百晓生:

---

视频一直转圈圈的问题可能是由于频繁触发timeupdate事件导致的。你可以尝试做一些优化来解决这个问题。首先，你可以增加一个标志位来判断是否正在拖动进度条，在拖动进度条时不执行timeupdate的逻辑。例如：

data() {
  return {
    dragging: false, // 是否正在拖动进度条
    // 其他数据
  }
},
methods: {
  // 其他方法
  timeupdate(e) {
    if (this.dragging) {
      return; // 如果正在拖动进度条，不执行逻辑
    }
    // 其他逻辑
  },
  // 其他方法
}

同时，你可以在拖动进度条时设置dragging为true，在拖动结束后再将dragging设置为false。例如：

<video
  id="player"
  class="video"
  :src="videoUrl"
  @timeupdate="timeupdate"
  @play="play"
  @pause="pause"
  @touchstart="dragStart"
  @touchend="dragEnd"
></video>

methods: {
  // 其他方法
  dragStart() {
    this.dragging = true;
  },
  dragEnd() {
    this.dragging = false;
  },
  // 其他方法
}

这样做的目的是避免在拖动进度条时频繁触发timeupdate事件，从而减少视频转圈圈的问题。希望这能解决你的问题！