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 на элемент.)