カスタムコントロールをフルスクリーンで表示する（クロームモバイル）

Question

カスタムコントロールを作成しようとしています。私は、これはJS

に

if((document.fullScreenElement && document.fullScreenElement !== null) || 
(!document.mozFullScreen && !document.webkitIsFullScreen)) { 
    if (video.requestFullscreen) { 
     video.requestFullscreen(); 
    } 
    else if (video.mozRequestFullScreen) { 
     container.mozRequestFullScreen(); // Firefox 
    } 
    else if (video.webkitRequestFullscreen) { 
     video.webkitRequestFullscreen(); // Chrome and Safari 
    } 
} 
else{ 
    if(document.cancelFullScreen) { 
     document.cancelFullScreen(); 
    } 
    else if(document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } 
    else if(document.webkitCancelFullScreen) { 
     document.webkitCancelFullScreen(); 
    } 
} 

toggleFullscreen機能であるコントロール

のこれは、HTML

<div id="video-container"> 
    <video width="400px" src="#" id="video"></video> 

    <div id="controls"> 
    <div class="switch" id="play"></div> 
    <div id="progress"> 
     <div id="progress-bar"></div> 
    </div> 
    <div id="fullscreen"></div> 
    </div> 
</div> 

ビデオブロックのCSSです

video::-webkit-media-controls { 
    display:none !important; 
} 

で

#controls { 
    z-index: 2147483647; 
    position: absolute; 
    width: 100%; 
    background: silver; 
    display: flex; 
    bottom: 0; 
    left: 0; 
} 

を元に隠されてきました

だから、デスクトップChroを開くと私はうまく働いています。全画面表示、OKです。私はf12を押して、 "デバイスツールバーを切り替える"、任意の電話を選択し、フルスクリーンに行く、それはそこにある。私はランドスケープモードをオンにします。
それから私は私の電話でそれを開きます。分かった。私は全画面表示、Aaaand見る。 "しかし、何が問題なの？"あなたは尋ねますか？ あなたが参照してください、src="#"？私のjsと私はそれを変更$video.attr("src", dir); 今それはなくなった。コントロールは全画面ではありません。元のコントロールが表示されますが、有効にすると有効になります。

Answer 1

OK、私はそれを管理しました。私はビデオにフルスクリーンを適用していましたが、ビデオコンテナ（ビデオとコントロールを含む）でこれを行います。

ありがとうございました。