h5 video 暂停后切前后台导致视频提前

蓓蕾心晴

发布于 2023-12-28 08:50:02

1070

发布于 2023-12-28 08:50:02

背景

使用 h5 video 开发的页面，对于需要视频定帧的场景，会通过调用 video.pause() 来使视频暂停，然而，当切到后台再重新切回前台，video 会重新出发 timeupdate 事件，并将当前的时间提前 1-2s 左右，从而导致视频定的帧改变。

分析

该问题可能是浏览器内部原因，因为它并没有重新触发 play 事件，仅仅是触发了 timeupdate 事件来改变了当前 video 的时间，而且仅第一次前后台切换会触发 timeupdate 事件。

解决

在手动调用视频暂停的时候，在判断视频没有暂停的状态情况下，这里保存当前暂停时的 video.currentTime，然后在监听到前后台切换的时候，判断如果视频依然为暂停状态，则重置 video.currentTime 为刚才保存的值。

pause() {
      if (!advideo.paused) {
        this.pauseCurrentTime = advideo.currentTime
        advideo.pause()
      }
 },
 
 
 stopControl (flag) {
      try {
        nextTick(() => {
          if (this.canPlay()) {
            advideo && advideo.play()
          } else {
            this.pause()
            // 这里为前后台切换后仍然为暂停的场景
            if (flag === 'viewableChange') {
              // 前后台切换浏览器会触发 timeupdate 事件，使视频暂停的时间提前 2s 左右，所以需要在这里重置回暂停之前的时间
              advideo.currentTime = this.pauseCurrentTime
            }
          }
        })
      } catch (error) {
         
      }
    },

注意，使用此种方法后，对于没有手动暂停的场景，自动播放结束后，也要监听 end 事件，更新 this.pauseCurrentTime = advideo.currentTime

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-12-27，如有侵权请联系 cloudcommunity@tencent.com 删除

video