Firefox全屏视频附加DOM元素 [英] Firefox fullscreen video append DOM elements

问题描述

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

no matter how I put elements in DOM as an overlay on html5 video (statically or dynamically), those elements in Firefox are not visible, although the z-index is set to 2147483647, opacity 1 and display block.

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

See 2 similar answers, working in Chrome, but not in FF:

在HTML5全屏视频上播放

显示全屏元素以外的元素（HTML5全屏API）

推荐答案

要显示叠加元素，而不是使视频全屏，请将视频元素的父级设为全屏。

To Display Overlay Element, instead of making video fullscreen, make parent of Video Element Fullscreen.

请参阅此处的示例 - https://jsfiddle.net/tv1981/tm069z9c/1/

See Example Here - https://jsfiddle.net/tv1981/tm069z9c/1/

以下st结构，我正在制作'容器'全屏

In following structure, I am making 'container' fullscreen

<div id="container">
  <div class="btn-fs" id="btnFS">
    Fullscreen
  </div>
  <div class='logo'>
    Logo Overlay
  </div>
  <video width="100%" height="100%" autoplay>
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.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

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（官方Build）（64位），FireFox Developer Edition 56.0b5（64位）

This is working in Chrome Version 60.0.3112.101 (Official Build) (64-bit), FireFox Developer Edition 56.0b5 (64-bit)

这篇关于Firefox全屏视频附加DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！