如何实现切换浏览器标签时HTML视频暂停、切回时自动从断点续播

原有代码问题排查 #

你现有代码无法实现切回标签自动续播，核心问题有2个：

• video.played 是返回已播放时间段的TimeRanges对象，不是布尔值，!video.played永远为假，自动续播逻辑完全不会触发
• 没有区分「用户手动暂停」和「切换标签系统自动暂停」两种场景，直接判断切回就播会不符合用户手动暂停的预期

修复后完整代码 #

var video = document.getElementById('video');
var documentTitle = document.title;
// 新增变量：标记是否是切换标签导致的自动暂停
var isAutoPaused = false;

var updateTitleForVideo = function(state) {
  if(state === 'visible') {
    document.title = documentTitle;
    return;
  }
  document.title = documentTitle + ' [' + state + ']';
};

video.onpause = function() {
  // 只有不是自动暂停的情况才更新标题为手动暂停
  if (!isAutoPaused) {
    updateTitleForVideo('Paused');
  }
};

video.onplay = function() {
  isAutoPaused = false;
  updateTitleForVideo('Played');
};

document.addEventListener('visibilitychange' , function(){
  var state = document.visibilityState;
  // 标签隐藏时：如果视频正在播放，自动暂停
  if (state === 'hidden') {
    if (!video.paused) {
      isAutoPaused = true;
      video.pause();
      updateTitleForVideo('Paused');
    }
    return;
  }
  // 标签切回时：如果是之前自动暂停的，才自动续播
  if (state === 'visible' && isAutoPaused) {
    video.play().then(() => {
      updateTitleForVideo('Played');
      isAutoPaused = false;
    }).catch(err => {
      // 部分浏览器限制自动播放，这里可以加容错处理，比如显示播放按钮
      isAutoPaused = false;
    });
  }
});

优化说明 #

• 新增isAutoPaused标记区分暂停场景，用户手动暂停后切回标签不会自动播放，符合使用预期
• 给video.play()添加Promise捕获，适配部分浏览器禁止非用户交互触发自动播放的限制，避免控制台报错
• 切走标签时自动保留当前播放进度，切回时默认从暂停位置直接续播，无需额外存储进度

内容的提问来源于stack exchange，提问作者Shazil Ali