如何让iOS端Safari中video.js播放的视频后台持续播放？

问题场景 #

在iOS Safari浏览器中，使用Video.js播放视频时，切换到后台或锁屏后视频会自动暂停，必须手动点击媒体控制栏的播放按钮才能恢复后台播放。但观察到其他基于Video.js的网站可实现视频后台自动持续播放。

现有实现代码 #

JSX中的<video>元素 #

<video
  className="video-js"
  ref={(el) => { videoRef = el; }}
  playsinline
  autoplay
/>

Video.js初始化代码 #

const player = videojs(
  videoRef,
  {
    controls: true,
    preload: 'auto',
    sources, // m3u8格式的视频源数组
    playbackRates: [1, 1.25, 1.5, 1.75, 2],
    html5: {
      hls: {
        overrideNative: false,
      },
      nativeVideoTracks: true,
      nativeAudioTracks: true,
      nativeTextTracks: true,
    },
  },
  async () => {
    try {
      await player.play();
    } catch (e) {
      console.warn('无法自动播放视频:', e);
    }
  },
);

已尝试方案及存在问题 #

曾通过监听页面可见性事件尝试修复，代码如下：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    video.play();
  }
});

但该方案存在缺陷：页面切换到后台时，无论用户是否主动暂停过视频，都会强制触发播放。且由于pause事件在后台状态下也会被系统触发，无法区分用户主动暂停和系统自动暂停，因此单纯监听pause事件无法解决该问题。

可行解决方案 #

1. 确保视频具备音频轨道 #

iOS Safari对无声视频的后台播放限制严格，只有包含音频轨道的视频才能获得后台播放权限。若你的视频为无声，可添加一条静音的音频轨道。

2. 兼容iOS的视频属性配置 #

在<video>元素中补充webkit-playsinline属性，确保iOS端的内联播放支持：

<video
  className="video-js"
  ref={(el) => { videoRef = el; }}
  playsinline
  webkit-playsinline
  autoplay
/>

3. 区分用户暂停与系统暂停 #

通过状态变量记录用户的手动操作，仅在用户未主动暂停时，后台切回后自动恢复播放：

// 记录用户是否主动暂停视频
let userPaused = false;

// 监听播放器的暂停事件，仅在页面可见时标记为用户主动暂停
player.on('pause', () => {
  if (document.visibilityState === 'visible') {
    userPaused = true;
  }
});

// 监听播放器的播放事件，重置用户暂停状态
player.on('play', () => {
  userPaused = false;
});

// 监听页面可见性变化，仅在用户未主动暂停时恢复播放
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && !userPaused) {
    player.play().catch(err => {
      console.warn('后台播放恢复失败:', err);
    });
  }
});

4. 确保播放触发符合iOS规则 #

iOS Safari要求有声视频的播放必须由用户手势触发（如点击按钮），因此建议在用户交互（比如点击"播放"按钮）后再调用player.play()，而非依赖autoplay属性，避免自动播放被浏览器拦截。

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