モバイルブラウザの向きの変更でブラウザのアドレスバーを非表示にするにはどうすればよいですか？

Question

私はウェブサイトに埋め込まれたビデオを持っていて、横幅モードでフルスクリーンに行くためにYouTubeアプリの動作と似ています。私はjavascriptでそれをやりたかったのです。安全上の理由からボタンをクリックせずにフルスクリーンAPIを使用することはできず、アドレスバーを非表示にすることはできませんが、これに対する回避策はありません。

このarticleが見つかりましたが、方向変更時にスクロールダウン機能を実行しようとしましたが、機能しませんでした。私はまた、より高いタイムアウトと低い位置に変数を変更しても、別のスクロール機能試してみました：まだ

$('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では機能しないようです。

Answer 1

スクリーンオリエンテーション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(); 
      } 
      } 
    } 
}