Как отобразить мои пользовательские элементы управления HTML-видео (или div) поверх полноэкранного видео? - PullRequest
Новая
       25

Как отобразить мои пользовательские элементы управления HTML-видео (или div) поверх полноэкранного видео?

0 голосов
/ 18 октября 2018

Последние два часа я искал решение, но пока не нашел.У меня есть две функции javascript: 

function fullScreen() {
     if (vid.requestFullScreen) vid.requestFullScreen();
     else if (vid.webkitRequestFullScreen) vid.webkitRequestFullScreen();
...
}

и еще одна для выхода из полноэкранного режима.Однако я не могу выйти из полноэкранного режима с прослушивателем событий двойного щелчка на моем видео, и независимо от того, что я пробовал, я не смог отобразить свои элементы управления видео в полноэкранном режиме.У меня есть видео и div (элементы управления) внутри div под названием "player_box".Когда я пытаюсь увеличить значение z и изменить div элементов управления на абсолютный, это не оказывает заметного влияния на div. 

<div id="player_box">
    <video id="my_video">
        <source src="test2.mp4">
    </video>
    <div id="controls_bar">
        <a href="#" title="Play/Pause" class="tooltip"><span title=""><button id="playPause"></button></span></a>
        <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
        <span id="curtimecode">00:00</span> / <span id="endtimecode">00:00</span>
        <a title="Mute/Unmute" class="tooltip"><span title=""><button id="mutebtn"></button></span></a>
        <input id="soundslider" type="range" min="0" max="100" value="100" step="1">
        <a title="Fullscreen" class="tooltip"><span title=""><button id="fullbtn"></button></span></a>
    </div>
</div>

В настоящее время я могу взаимодействовать с видео только в «обычном режиме», я могу использовать прослушиватели событий.и управление видео, но как только оно становится полноэкранным, я никак не могу с ним взаимодействовать.Мне нужно либо перезагрузить страницу, либо нажать Esc / F11.

Обновление: вы можете использовать прослушиватели событий в полноэкранном режиме, который я вставил не в тот элемент, поэтому он не работает.Первоначальная проблема остается, хотя.

1 Ответ

0 голосов
/ 18 октября 2018

requestFullScreen() API может применяться к любым элементам HTML DOM, а не только к тегам <video>.

Прямо сейчас вы настраиваете сам элемент видео в полноэкранный режим, так чточто отображается в полноэкранном режиме.

Вы хотите, чтобы пользовательские элементы управления были включены, поэтому установите родительский элемент, содержащий видео и эти элементы управления, в полноэкранный режим: 

function fullScreen() {
     var vidContainer = document.getElementById("player_box"); // instead of #my_video
     if (vidContainer.requestFullScreen) vidContainer.requestFullScreen();
     else if (vidContainer.webkitRequestFullScreen) vidContainer.webkitRequestFullScreen();
     // ...
}

Вам необходимо установитьCSS элементов, содержащихся в полноэкранном узле, так что они фактически заполняют всю область экрана (ширина и высота 100% и т. д.). При необходимости вы можете использовать псевдокласс :fullscreen в большинстве браузеров, чтобы установить разныестилизация при входе и выходе из полноэкранного режима: 

#player_box:fullscreen {position:relative}
#player_box:fullscreen #my_video {width: 100vw; height: 100vh}
#player_box:fullscreen #controls_bar {bottom: 0}

(... хотя теперь, когда я посмотрю более внимательно, поддержка этого псевдокласса не завершена; некоторые браузеры используют вместо него :full-screen, а некоторые - нет.не поддерживают его вообще. Может быть, лучше переключить новое имя класса на элемент при запуске полноэкранного режима, и вместо этого основывать свои полноэкранные правила - т.е. иметь правила css для #player_box идля #player_box.isFullscreen и при необходимости переключать .isFullscreen на элемент.)

...