html - 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('.container').video.webkitExitFullscreen()

反而

document.queryselector('video').video.webkitExitFullscreen()

这应该可行，我已经尝试过了。