HTML5 视频全屏

【问题标题】：HTML5 Video FullscreenHTML5 视频全屏
【发布时间】：2013-01-17 14:54:02
【问题描述】：

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

全屏模式关闭：

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

【问题讨论】：

这有帮助吗？ Having custom controls still apply when go fullscreen on a HTML5 video?（可能重复）
它可以工作，但并不完美。我正在努力使它完美。

【解决方案1】：

显示自定义控制器

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

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

隐藏原生控制器

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

【讨论】：

【解决方案2】：

当你全屏时，是视频元素全屏，而不是同时包含控件和视频的容器。

例如

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

在 JS 中做

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

相反

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

这个应该可以了，我试过了。

【讨论】：