Comment masquer la barre d'adresse du navigateur sur les changements d'orientation dans les navigateurs mobiles?

Question

J'ai une vidéo intégrée sur un site web et similaire au comportement de l'application youtube pour aller en mode plein écran en mode paysage, je voulais le faire avec javascript. Je sais que vous ne pouvez pas utiliser l'API en plein écran sans cliquer sur un bouton pour des raisons de sécurité et vous ne pouvez pas forcer à masquer la barre d'adresse, mais n'y a-t-il pas une solution pour cela?

J'ai trouvé ce article et j'ai essayé d'activer la fonction de défilement sur le changement d'orientation, mais cela n'a pas fonctionné. J'ai aussi changé les variables à un délai d'attente supérieur et une position inférieure et aussi essayé une autre fonction de défilement:

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

toujours pas d'effet ...

Voici le code:

Javascript Changement d'orientation fonction:

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; 
    } 
} 

J'ai vérifié plusieurs entrées Stackoverflow mais je n'ai pas trouvé de solution de travail. Quelqu'un connaît la réponse à cela ou a un indice?

Modifier: La solution de contournement de scrolldown semble fonctionner pour mobile IOS Safari mais pas pour mobile Chrome.

Answer 1

Il existe une API d'orientation d'écran et une API Fullscreen, qui peuvent fonctionner de pair. Il n'est pas pris en charge par Safari mais fonctionne dans la plupart des navigateurs 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(); 
      } 
      } 
    } 
}