У меня есть HTML-страница, использующая VideoJS для воспроизведения видео.Элемент 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>
Контейнер видео может быть создан либов parent1A или в parent2A с тем же содержимым html.При создании в parent1A его можно отобразить в полноэкранном режиме, вызвав videoContainer1.requestFullscreen.Но в parent2A с тем же вызовом requestFullscreen он вышел на полный экран и автоматически завершился. Я хочу, чтобы в parent2A он вел себя так же, как и в parent1A, а не для автоматического выхода из полноэкранного режима.
При прослушивании события смены экрана я мог видеть, что оно срабатывает дважды - войти и выйтиполноэкранный.Таким образом, ключом было выяснить, кто вызвал вторую смену экрана или какой фактор не позволил ему быть полноэкранным.
Различия, которые я вижу, заключаются в следующем:
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 могут быть введены в полную версию.Экран (через запрос Fullscreen, конечно) без проблем.Полноэкранная функция как-то нарушена в одном элементе предка.Например, элементы из parent2D в parent2C могут быть полноэкранными, но проблема возникает в parent2B и в элементах после него (включая videoContainer2).Возможно ли, что какой-то атрибут CSS повлиял на функцию, хотя я не выяснил, что это такое?Опять же, parent2B - это элемент OpenLayers, но я не могу сказать, что OpenLayers сейчас является основной причиной.
Может кто-нибудь любезно помочь выяснить, что я должен проверить дальше, или что может вызвать полноэкранный автопроблема выхода?Большое спасибо.