Как скрыть адресную строку браузера при смене ориентации в мобильных браузерах?

1

У меня есть видео, встроенное на веб-сайт и похожее на поведение приложения youtube для перехода на полноэкранный режим в ландшафтном режиме. Я хотел сделать это с помощью javascript. Я знаю, что вы не можете использовать полноэкранный api без нажатия кнопки из соображений безопасности, и вы не можете заставить скрывать адресную строку, но нет ли обходного пути для этого?

Я нашел эту статью и попытался запустить функцию scrolldown при изменении ориентации, но это не сработало. Я также изменил переменные на более высокий тайм-аут и нижнюю позицию, а также попробовал другую функцию прокрутки:

$('html, body').animate({scrollTop: 100}, 100);

Еще никакого эффекта...

Это код:

Функция изменения ориентации Javascript:

updateOrientation: function() {
    orientation = $(window).width() / $(window ).height() < 1 ? 'portrait' : 'landscape';
    var device_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        device_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
        new_width,
        new_height;
    if(orientation === 'landscape'){
        new_width = device_width;
        new_height = device_height;
        if($('#videoPlayer').length > 0 && $(window).scrollTop() < 50){
            $('html, body').animate({scrollTop: 100}, 100); //this should hide the address bar
        }
    }else{
        //code when switching back to portrait
        ...
    }
    $('#videoPlayer').css({
        'width': new_width,
        'height': new_height
    });
}

CSS:

@media screen and (orientation:landscape){
   article #videoPlayer{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height:100vh;
   }
   article #videoPlayer{
      background-color: #000;
   }
   video {
      object-fit: contain;
   }
   body.player_initialized #sticky_navigation{
      display: none;
   }
}

Я проверил несколько записей Stackoverflow, но не нашел рабочего решения. Кто-нибудь знает ответ на это или имеет намек?

Изменить. Обходной путь scrolldown, похоже, работает для мобильного IOS Safari, но не для мобильного Chrome.

Теги:
video
fullscreen
landscape

1 ответ

0

Существует API ориентации экрана и полноэкранный API, который может работать рука об руку. Он не поддерживается Safari, но работает в большинстве Android-браузеров:

if('orientation' in screen){
    window.screen.orientation.onchange = function() {
          if (this.type.startsWith('landscape') && document.querySelector('#element').webkitRequestFullScreen) {
            document.querySelector('#element').webkitRequestFullscreen();
          } else {
            if(document.webkitCancelFullScreen){
                document.webkitExitFullscreen();
            }
          }
    }
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню