Блог

Главная - Вопросы по программированию - Автоматическое создание полноэкранного режима видео при альбомной ориентации устройства с помощью javascript

Автоматическое создание полноэкранного режима видео при альбомной ориентации устройства с помощью javascript

#javascript #html #video #orientation #fullscreen

#javascript #HTML #Видео #ориентация #полноэкранный режим

Вопрос:

У меня есть видео, которое при нажатии кнопки становится полноэкранным. Мне нужна помощь в автоматическом создании полноэкранного режима видео при альбомной ориентации устройства. Я перепробовал много способов, но ни один из них не сработал.

Вот мой код:

 var elem = document.getElementById("video");

function becomeFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    /* IE/Edge */
    elem.msRequestFullscreen();
  }
}  
 <video id="video" width="600" height="800">
            <source src="videoplaceholder.mp4" />
        </video>

<button id="button" onclick="becomeFullscreen()">Fullscreen</button>

Комментарии:

1. Пожалуйста, сообщите нам, пытались ли вы проверить устройство каким-либо кодом, находится ли оно в альбомном режиме или нет.

2. Я пробовал этот код: window.addEventListener(«orientationchange», функция() { becomeFullscreen(); }, false );

3. Вам нужно проверить свойство window.orientation внутри обработчика orientationChange, developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

4. Хорошо, спасибо, я прочитаю это

5. Спасибо, теперь это работает!

Ответ №1:

Вам нужно проверить свойство window.orientation внутри обработчика orientationChange. Внутри обработчика события orientationChange event проверьте свойство window.screen.orientation. Если это альбомная ориентация, сделайте видео полноэкранным.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

Ответ №2:

Добавьте приведенный ниже код в свой Javascript

 window.addEventListener("orientationchange", function(event) {
  var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

if ( ["landscape-primary","landscape-secondary"].indexOf(orientation)!=-1) {
  becomeFullscreen();
}

else if (orientation === undefined) {
  console.log("The orientation API isn't supported in this browser :("); 
}
});