Question

我有一个使用VideoJS播放视频的html页面。 video元素及其div容器可以在html文档层次结构中的两个不同位置动态创建。 问题在于，视频div在一个地方可以全屏显示，但在另一个地方会失败（进入全屏，然后立即退出全屏）。

由于页面的代码很复杂，并且我没有在简化的演示中成功再现该问题，所以我组成了如下所示的类似HTML结构来解释问题。

<html>
  <body>
    ...
    <div>
      <div>...</div>
    </div>
    <div>
      <div>...</div>
      <div id="parent1A">
        <div id="videoContainer1">A lot of things here, including a HTML video element</div>
      </div>
      ...
      <div id="parent2D">
        <div>
          <div>
            <div>
              <div>
                <div id="parent2C">
                  <div id="parent2B">
                    <div>
                      <div id="parent2A">
                        <div id="videoContainer2">A lot of things here, including a HTML video element</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>...</div>
      ...
    </div>
    <div>...</div>
    ...
  </body>
</html>

可以在具有相同html内容的 parent1A 或 parent2A 中创建视频容器。在 parent1A 中创建后，可以通过调用videoContainer1.requestFullscreen将其全屏显示。但是在 parent2A 中，通过相同的requestFullscreen调用，它变为全屏显示并自动退出。 我希望它在parent2A中的行为与在parent1A中的行为相同-而不是自动退出全屏。

在收听screenchange事件时，我看到它被触发了两次-输入然后退出全屏显示。因此关键是要找出是谁触发了第二次屏幕更改，或者是什么因素阻止了它发生全屏显示。

我可以看到的区别是：

parent2A位于更深的层次中。页面上的深度为16，但是在具有相同深度的简单演示页面之后，我没有看到任何问题。
videoContainer2路径中的某些元素与 OpenLayers 相关，因为parent2D下的内容基于地图。 OpenLayers创建并修改了videoContainer2路径中的某些元素。也许重要的是OpenLayers？但是我在OpenLayers库中搜索了与全屏相关的代码，并为所有exitFullscreen，stopPropagation和Event.preventDefault（）设置了断点，但是在调试过程中都没有命中它们。
parent2A和parent1A具有不同的 z-index 。我在一个简单的页面上检查了z-index。似乎z-index不会影响全屏行为。

此外，我怀疑也许某些事件被劫持，或者其他名为exitFullscreen的库也被劫持了。因此，我在整个项目中搜索了 exitFullscreen，stopPropagation和Event.preventDefault（），但没有一个被调用。

一个线索是，可以毫无问题地将videoContainer2的某些祖先置于全屏状态（当然，通过requestFullscreen）。全屏功能在一个祖先元素上以某种方式被破坏。例如，从parent2D到parent2C的元素可以全屏显示，但是问题发生在parent2B及其后面的元素（包括videoContainer2）。尽管我尚未弄清CSS属性是什么，但是否有一些 CSS属性影响了该功能？同样，parent2B是OpenLayers的元素，但我不能肯定地说OpenLayers是现在的根本原因。

任何人都可以帮忙弄清楚我接下来应该检查什么，或者什么可能导致全屏自动退出问题？非常感谢。

为什么html元素在由requestFullscreen全屏显示后立即自动退出全屏

0 个答案: