@Niksak

Как сделать поворот экрана в горизонтальное положение при входе в полноэкранный режим?

6525995b1cc41293281836.png
Пишу плеер с кастомным интерфейсом. Сейчас если на мобилке войти в полный экран то выглядит как на скрине. Если повернуть телефон то все выглядит хорошо. Необходимо чтобы при входе в полный экран этот самый экран автоматически входил в горизонтальное положение.
Я пробовал screen.orientation.lock("landscape"). Не очень оно и работает ( код функции ниже )
toggleFullscreen(){
      if(document.fullscreenElement == null){
        this.$refs.videoContainer.requestFullscreen();
        this.isFullscreen = true;
        

        if (this.isMobile()) {
          // Запрещаем поворот экрана в вертикальное положение
          screen.orientation.lock("landscape").catch(err => {
            console.error("Ошибка блокировки ориентации:", err);
          });
        }
      }else{
        document.exitFullscreen();
        this.isFullscreen = false

        if (this.isMobile()) {
          screen.orientation.unlock();
        }
      }
    },

Код выше - функция обработчик на кнопку полноэкранного режима, там я и использую этот screen.orientation.
Функция чтобы узнать что юзер с мобилки сидит:
isMobile() {
      // Функция для определения, является ли устройство мобильным
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
    },


Но код не работает, точнее вылазит следующая ошибка:
65259a28c75da863703589.png
  • Вопрос задан
  • 138 просмотров
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
Код ваш работает.
Но блокировка ориентации не поддерживается на данном устройстве. О чем в консоли и написано.

Вообще этот АПИ не везде поддерживается, так что только так.

Попробуйте подсказать юзверю, что надо повернуть мобильник.
Обрабатывайте возвращаемый промис, и если блокировка отклонена, выводите поверх страницы баннер с просьбой перевернуть устройство. отслеживайте ориентацию, чтобы скрыть баннер, когда устройство повернется в нужное положение.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы