解决iOS原生播放器接管VideoJS全屏后HTML覆盖层失效问题

问题核心：iOS原生全屏播放器是系统级组件，会脱离WebView独立渲染，导致Web端的HTML覆盖层无法叠加在其上。要解决这个问题，得绕开原生播放器接管全屏，改用VideoJS的自定义全屏模式。

具体步骤：

1. 配置VideoJS禁用原生全屏
   初始化播放器时，强制使用HTML5技术栈，禁用原生触摸控件，让VideoJS自行处理全屏逻辑：

const player = videojs('Player_' + ID, {
  techOrder: ['html5'], // 强制使用HTML5播放器，不 fallback 到原生
  nativeControlsForTouch: false, // 禁用iOS原生触摸控件
  playsinline: true, // 确保内联播放，配合标签的playsinline属性
  fullscreen: {
    options: {
      navigationUI: 'hide' // 可选，隐藏iOS全屏时的顶部导航栏
    }
  }
});

2. 适配覆盖层的全屏样式
   当VideoJS进入全屏时，播放器容器会自动添加vjs-fullscreen类，针对这个类调整覆盖层的样式，确保它能铺满全屏且层级高于播放器：

/* 默认状态下的覆盖层样式（非全屏） */
.custom-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none; /* 避免遮挡视频的交互，如需交互的元素单独设置auto */
}

/* 全屏状态下的覆盖层样式 */
.vjs-fullscreen .custom-overlay {
  position: fixed; /* 确保铺满整个屏幕 */
  z-index: 10000; /* 提高层级，避免被播放器控件遮挡 */
}

/* 让覆盖层内的交互元素可点击 */
.custom-overlay .score-time,
.custom-overlay .game-time {
  pointer-events: auto;
}

3. 容器包裹优化（可选）
   如果上述配置仍有问题，可以把视频和覆盖层放在同一个父容器内，让VideoJS对整个容器进行全屏处理：

<div class="video-wrapper">
  <video class="videoPlayer" preload="none" data-bind="attr: {'id': 'Player_' + ID}, VideoURL: $data" playsinline controls controlsList="nodownload"></video>
  <div class="custom-overlay" style="display: none;" data-bind="visible: $root.replayOverlay().Show && $root.hideOverlay">
    <!-- 覆盖层内容 -->
  </div>
</div>

初始化时指定播放器的父容器：

const player = videojs('Player_' + ID, {
  // 其他配置
}, function() {
  this.fullscreen({element: document.querySelector('.video-wrapper')});
});

注意：iOS系统对Web视频的全屏行为有严格限制，必须确保用户主动触发播放（比如点击播放按钮），否则可能无法正常进入自定义全屏。

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