如何让使用video.js播放的视频在iOS上继续在后台播放？

Question

在我的网站上，我有使用 video.js 播放的视频。当通过 iOS 上的 Safari 使用该网站时，如果我将 Safari 后台运行或锁定手机，视频就会暂停，我需要找到媒体控件并按下播放按钮，视频才能继续在后台播放。我见过其他使用 video.js 的网站，其中视频能够在后台自动播放。

如何让我的视频在 iOS 上继续在后台播放？

这是我的

<video>

元素 (jsx)。我尝试过

playsinline

、

autoplay

和

preload="auto"

的不同组合。

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

这是我设置 video.js 的代码，我无法识别在我的网站后台运行时改变播放行为的任何参数：

    const player = videojs(
      videoRef,
      {
        controls: true,
        preload: 'auto',
        sources, // Array of `m3u8` URLs
        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) {
          // The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
          console.warn('Could not automatically play video', e);
        }
      },
    );

我通过以下代码取得了一些成功：

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

这可行，但是，当页面处于后台时它也会播放暂停的视频。跟踪

pause

事件不起作用，因为只要页面处于后台状态，而不仅仅是在用户暂停时，就会触发

pause

。

Answer 1

这似乎有效：

    let userPaused = false;

    player.on('pause', () => {
      userPaused = Boolean(player.userActive());
    });

    player.on('playing', () => {
      userPaused = false;
    });

    document.addEventListener('visibilitychange', function () {
      if (document.visibilityState === 'hidden' && !userPaused) {
        player.play();
      }
    });

在我的测试中，这可以准确跟踪用户是否暂停了视频与其他事件，并在用户将页面置于后台时保持视频在后台播放。