requestFullscreen для нескольких элементов

Question

Итак, представьте, что вы используете библиотеку видеовходов HTML5, такую ​​как Videojs. Вы хотите расширить функциональность этой библиотеки, добавив дополнительную кнопку, но по причинам, не имеющим отношения к этому вопросу, вы не хотите попасть во весь этот бизнес-код для плагинов, поэтому вы просто вставляете плеер внутри контейнера и добавляете абсолютно позиционированный кнопка, такие как:

<div class="player-container"> 
    <video class="video-js"></video> 
    <button type="button" class="absolutely-positioned"></button> 
</div> 

проблема в том, что в какой-то момент вы можете нажать на кнопку полноэкранного проигрывателя, и это будет вызывать requestFullscreen на видеоэлемент и только элемент видео. Это означает, что ваша кнопка или что-либо еще на этом контейнере не будет находиться в полноэкранном режиме.

В браузерах webkit вы можете сделать другие элементы видимыми на полноэкранном режиме, установив z-index равным или выше, равным или выше, по сравнению с видеоэлементом в полноэкранном режиме. На Firefox элемент необходимо изменить на position: fixed (но вы не можете использовать префикс -moz-full-screen, чтобы его стиль, потому что элемент не распознан как полноэкранный режим), а в IE его просто не видно.

Я пытаюсь выяснить, включен ли полноэкранный режим только одному элементу (и его дочерним элементам), или если возможно одновременное использование нескольких полноэкранных элементов. Кто-нибудь еще боролся с чем-то подобным? Есть ли обходные пути?

Answer 1

Я, кажется, нашел решение после осмотра нового средства просмотра Википедии (которое отображает кнопки после полноэкранного просмотра). Z-индекс действительно играет роль, но кажется, что трюк вызывает вызов requestFullscreen на элемент контейнера, охватывающий ваш носитель, а также его настраиваемые элементы управления.