VideoJS暂停覆盖层在移动端显示异常遮挡播放器控制栏

问题根源 #

故障由三点共同导致：

1. 初始化配置开启了nativeControlsForTouch: true，移动端会调用浏览器原生播放控件，原生控件层级不受自定义z-index规则管控，反而会被绝对定位的自定义覆盖层遮挡
2. 广告层.child写死固定宽高，未做响应式适配，移动端播放器宽度小于450px时元素溢出，同时未设置层级，默认层级高于播放器控制栏
3. 覆盖层直接挂载在外部父容器，未嵌入VideoJS内部内容层，层级优先级错乱，容易遮挡播放器原生UI

修复步骤 #

• 关闭移动端原生控件：将nativeControlsForTouch参数设为false，强制移动端使用VideoJS自定义控件，支持层级调整
• 调整广告层样式：替换固定宽高为响应式尺寸，设置z-index低于播放器控制栏，底部预留控制栏显示空间，适配小屏设备
• 修正挂载节点：将广告层插入VideoJS内部内容容器，不要直接挂载在外部父节点，避免层级错乱
• 增加边界判断：避免多次触发pause事件时重复插入广告节点

修复后完整代码 #

<link href="https://cdn.jsdelivr.net/npm/video.js@7.18.1/dist/video-js.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/video.js@7.18.1/dist/video.min.js"></script>
<style>
.parent{
  position:relative;
}
/* 修复后的广告层样式 */
.child{
  position:absolute;
  /* 响应式宽高，最大不超过容器尺寸，底部预留控制栏空间 */
  max-width: calc(100% - 20px);
  width: 450px;
  max-height: calc(100% - 60px);
  height: 300px;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 层级低于VideoJS控制栏（控制栏默认z-index为100） */
  z-index: 10;
  pointer-events: auto;
}
.child iframe{
  max-width: 100%;
  max-height: 100%;
}
</style>
<div id="div112" class="parent">
  <video id="video123" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{"fluid": true, "playbackRates": [0.5, 1, 1.25, 1.5, 2],"nativeControlsForTouch": false}' controls>
    <source src="videourl" type='video/mp4'>
  </video>
</div>
<script>
videojs("video123").ready(function(){
  var player = this;
  var div1 = document.createElement('div');
  div1.innerHTML = '<iframe src="ad-address" width="310" height="275" scrolling=no frameborder=0></iframe>';
  div1.className="child";
  // 挂载到播放器官方内容层，层级位于视频上方、控制栏下方
  var contentEl = player.el().querySelector('.vjs-text-track-display');
  this.on("pause", function(){
    // 避免重复插入广告节点
    if(!div1.parentNode){
      contentEl.appendChild(div1);
    }
  });
  this.on("play", function(){
    if(div1.parentNode){
      div1.parentNode.removeChild(div1);
    }
  });
});
</script>

优化说明 #

• 用transform: translate(-50%,-50%)替代固定负margin居中，适配不同尺寸的广告元素，不会出现位置偏移
• iframe设置最大宽高100%，小屏设备下自动缩放，不会溢出容器
• 广告层底部预留60px空间，完全避开控制栏显示区域，配合z-index设置，控制栏唤起时始终显示在最上层
• 增加节点存在性判断，避免多次触发暂停事件导致重复插入广告

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