HTML5视频全屏

Question

我尝试制作HTML5视频播放器。我用CSS和jQuery创建了自定义控件。但是当我打开全屏模式时，我无法在全屏模式下看到自定义控件。

关闭全屏模式：

启用全屏模式，但没有自定义控件：

Answer 1

显示自定义控制器

请将z-index添加到您的自定义控件元素

#customController{
  -------------------;
  -------------------;
  -------------------;
  z-index: 2147483647;
}

隐藏原生控制器

video::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls-enclosure {
  display:none !important;
}

Answer 2

当你全屏显示时，它是获取全屏的视频元素，而不是包含控件和视频的容器。

例如

<div class='container'>
    <vido></video>
    <div class='custom-controls'>...</div>
</div>

在JS中 做

  

document.queryselector（ '容器'）。video.webkitExitFullscreen（）

相反

  

document.queryselector（ '视频'）。video.webkitExitFullscreen（）

这应该有效，我已经尝试过了。