Firefox 全屏视频附加 DOM 元素答案

【问题标题】：Firefox fullscreen video append DOM elementsFirefox 全屏视频附加 DOM 元素
【发布时间】：2018-01-29 14:14:54
【问题描述】：

无论我如何将 DOM 中的元素作为覆盖在 html5 视频上（静态或动态），Firefox 中的这些元素都是不可见的，尽管 z-index 设置为 2147483647、不透明度 1 和显示块。

查看 2 个类似的答案，在 Chrome 中工作，但在 FF 中没有：

Overlay on HTML5 Fullscreen Video

Displaying elements other than fullscreen element (HTML5 fullscreen API)

【问题讨论】：

我想到的替代解决方案是“假全屏”：在 100% 的屏幕上显示视频，然后在其上放置元素，但我更喜欢原生全屏解决方案。

标签： firefox html5-video z-index html5-fullscreen

【解决方案1】：

要显示覆盖元素，而不是使视频全屏，使视频元素的父级全屏。

在此处查看示例 - https://jsfiddle.net/tv1981/tm069z9c/128/

在以下结构中，我正在制作“容器”全屏

<div id="container">
  <div class="btn-fs" id="btnFS">
    Fullscreen
  </div>
  <div class='logo'>
    Logo Overlay
  </div>
  <video width="100%" height="100%" autoplay muted>
    <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"> Your browser does not support the video tag.
  </video>
  <div class='footer'>
    This is Test Overlay for Video
  </div>
</div>

JavaScript

fs.addEventListener('click', goFullScreen);

function goFullScreen() {
  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
    document.webkitFullscreenElement || document.msFullscreenElement;
  if (fullscreenElement) {
    exitFullscreen();
  } else {
    launchIntoFullscreen(document.getElementById('container'));
  }
}

这适用于 Chrome 版本 60.0.3112.101（官方构建）（64 位）、FireFox 开发者版 56.0b5（64 位）

【讨论】：

谢谢，我会调查并回复你
当然，这是真正的原生全屏，也适用于移动设备。这应该符合您的目的。
好的，既然你已经在 JSFiddle 中演示了它，我不会等到我实现它，你会收到赏金！谢谢
Ping here 如果您遇到任何问题，我一定会尽力帮助您。我已经将这种方法用于视频播放器，它也适用于所有主要浏览器和最新的移动浏览器。
有什么办法可以在手机浏览器上实现这个功能吗？用 iPhone 试过。没用。