Problem mit benutzerdefinierten Steuerelementen im Vollbildmodus (Chrome Mobile)

Question

Ich versuche, benutzerdefinierte Steuerelemente zu erstellen. Ich habe das Original versteckt mit

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

Dies ist der HTML des Videoblocks

<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 Kontrollen

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

Diese Funktion ist in JS toggleFullScreen ist

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

Also, wenn ich Desktop-Chro öffnen Mir geht es gut. Im Vollbildmodus ist es in Ordnung. Ich drücke F12, "toggle device toolbar", wähle ein beliebiges Handy, gehe in den Vollbildmodus, es ist da. Ich drehe den Landscape-Modus, nichts Schlechtes.
Dann öffne ich es auf meinem Handy. Ich sehe es. Ich gehe Vollbild, Aaa und ich sehe es. "Aber was ist das Problem?" Willst du fragen? Sie sehen, src="#"? Mit meiner js ändere ich es $video.attr("src", dir); Jetzt ist es weg. Keine Steuerelemente im Vollbildmodus. Während die ursprünglichen Steuerelemente angezeigt werden, wenn ich aktiviere.

Answer 1

OK, ich habe es geschafft. Ich habe Vollbild auf das Video angewendet, jetzt mache ich das für den Video-Container (der Video und Steuerelemente enthält).

Vielen Dank für Ihre Aufmerksamkeit.