如何通过HTML/JS实现iOS Safari视频结束后关闭播放器

问题背景 #

我用HTML和JS创建了视频标签，在安卓浏览器里全屏播放视频结束后，能通过JS自动关闭播放器，但在iOS Safari里，视频结束只会停止播放，没法关闭播放器。已知iOS的播放器和其他设备有差异，现有代码如下：

HTML代码 #

<video id="my-video" class="video-js"></video>

JS代码 #

player.on('ended', function () {
    alert("closed ios player")
}

解决方案 #

iOS Safari的原生全屏播放器受系统权限限制，无法直接通过JS调用关闭，可通过以下两种方式实现类似效果：

• 使用内联播放模式替代原生全屏
  给video标签添加playsinline和webkit-playsinline属性，让视频在页面内播放而非调用系统原生播放器，这样就能完全通过JS控制播放状态：

  <video id="my-video" class="video-js" playsinline webkit-playsinline></video>
  

  视频结束后，可直接调用相关API实现关闭/隐藏效果：

  player.on('ended', function () {
      // 退出页面内全屏
      if (document.exitFullscreen) {
          document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
      }
      // 暂停并重置视频进度
      player.pause();
      player.currentTime = 0;
      // 可选：隐藏视频元素
      document.getElementById('my-video').style.display = 'none';
  });
  

• 利用用户交互触发退出（效果有限）
  iOS不允许无用户交互的情况下关闭原生播放器，可在视频结束后引导用户点击页面空白处退出，或尝试模拟用户交互（不一定稳定）：

  player.on('ended', function () {
      // 创建隐藏按钮并模拟点击
      const btn = document.createElement('button');
      btn.style.display = 'none';
      document.body.appendChild(btn);
      btn.addEventListener('click', () => {
          if (player.exitFullscreen) {
              player.exitFullscreen();
          } else if (player.webkitExitFullscreen) {
              player.webkitExitFullscreen();
          }
      });
      btn.click();
      document.body.removeChild(btn);
  });
  

说明 #

iOS Safari对媒体播放的权限限制严格，原生全屏播放器的控制权大多在系统手中，最可靠的方案是使用内联播放模式，自定义播放界面和行为，避开系统原生播放器的限制。

内容的提问来源于stack exchange，提问作者Nguyen Van Quang