HTML5视频全屏模式下覆盖层div的z-index失效问题求助

问题根本原因 #

移动端浏览器原生全屏逻辑默认仅将<video>元素单独提升至全屏渲染层级，你的覆盖层父容器.vcontainer未进入全屏层级，二者不在同一渲染上下文中，因此z-index设置无效。

解决方案 #

步骤1：新增全屏状态CSS样式 #

在原有CSS基础上补充以下代码，适配容器进入全屏后的布局：

/* 兼容不同内核的容器全屏样式 */
.vcontainer:fullscreen,
.vcontainer:-webkit-full-screen,
.vcontainer:-moz-full-screen,
.vcontainer:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 全屏状态下视频尺寸适配 */
.vcontainer:fullscreen video,
.vcontainer:-webkit-full-screen video,
.vcontainer:-moz-full-screen video,
.vcontainer:-ms-fullscreen video {
  width: 100%;
  max-height: 100vh;
  height: auto;
}

步骤2：新增全屏切换逻辑 #

不要触发video原生全屏，改为将整个.vcontainer容器设为全屏元素，补充JS代码：

// 全屏切换方法
function toggleContainerFullscreen() {
  const container = document.getElementById('myvideo');
  if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
    // 进入全屏
    if (container.requestFullscreen) container.requestFullscreen();
    else if (container.webkitRequestFullscreen) container.webkitRequestFullscreen();
    else if (container.mozRequestFullScreen) container.mozRequestFullScreen();
    else if (container.msRequestFullscreen) container.msRequestFullscreen();
  } else {
    // 退出全屏
    if (document.exitFullscreen) document.exitFullscreen();
    else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
    else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
    else if (document.msExitFullscreen) document.msExitFullscreen();
  }
}

// 绑定自定义全屏按钮事件（在.vcontainer内添加一个触发全屏的自定义按钮即可）
// 示例：给id为customFullBtn的按钮绑定事件
$('#customFullBtn').on('click', toggleContainerFullscreen);

低版本iOS兼容方案 #

如果需要适配iOS 12以下版本，该类版本不支持非video元素原生全屏，可以用模拟全屏方案：

.vcontainer.mock-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

检测到是低版本iOS时，切换mock-fullscreen类模拟全屏即可，覆盖层可正常显示。

额外说明 #

原有代码中使用的readyQ、bindReadyQ如果没有提前定义属于无效代码，可以直接删除，不影响功能。

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