HTML5 视频全屏

Posted 2023-05-07

【中文标题】HTML5 视频全屏

【英文标题】：HTML5 Video Fullscreen

【发布时间】：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()

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