Firefox 全屏视频追加 DOM 元素

Question

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

看到 2 个类似的答案，在 Chrome 中工作，但不在 FF 中：

Overlay on HTML5 Fullscreen Video

Displaying elements other than fullscreen element (HTML5 fullscreen API)

Answer 1

要显示叠加元素，不要让视频全屏显示，而是让视频元素的父元素全屏显示。

参见此处示例 - https://jsfiddle.net/tv1981/tm069z9c/128/

在下面的结构中，我正在制作'container'全屏

<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 Developer Edition 56.0b5（64 位）

Firefox 全屏视频追加 DOM 元素

Firefox fullscreen video append DOM elements

firefox

z-index

html5-video

html5-fullscreen