Czy niestandardowe elementy sterujące są nadal stosowane po przejściu w tryb pełnoekranowy na wideo HTML5?

Question

Utworzyłem niestandardowe elementy sterujące dla mojego wideo HTML5, ale nie wiem, jak to zrobić, aby CSS nadal obowiązywały, gdy przejdę w tryb pełnoekranowy.

Oto [website] Mam opiera swoje kontrole.

Na tej stronie zauważysz, że po kliknięciu przycisku pełnoekranowego przyciski niestandardowe zostaną utracone, a wideo powróci do domyślnych elementów sterujących <video>.

Czy ktoś wie, jak uzyskać te niestandardowe elementy sterujące, stylowanie/CSS ma nadal zastosowanie w przypadku korzystania z trybu pełnoekranowego?

Answer 1

Odpowiedziałem na własne pytanie, kluczem jest to, że niestandardowe elementy sterujące znajdują się wewnątrz <div>, które obejmują wideo, które chcesz wziąć w pełnym ekranie. W poniższym kodzie ten <div> nazywany jest "wideoContainer".

Oto link Użyłem do tego dojść. http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

oto kod JS zarówno wchodzenie i wychodzenie z trybu pełnoekranowego w WebKit i Mozilla przeglądarek:

var $video=$('video'); 
//fullscreen button clicked 
$('#fullscreenBtn').on('click', function() { 
$(this).toggleClass('enterFullscreenBtn'); 
    if($.isFunction($video.get(0).webkitEnterFullscreen)) { 
       if($(this).hasClass("enterFullscreenBtn")) 
        document.getElementById('videoContainer').webkitRequestFullScreen();       
       else 
       document.webkitCancelFullScreen();  
    } 
    else if ($.isFunction($video.get(0).mozRequestFullScreen)) { 
       if($(this).hasClass("enterFullscreenBtn")) 
        document.getElementById('videoContainer').mozRequestFullScreen(); 
       else 
        document.mozCancelFullScreen(); 
    } 
    else { 
      alert('Your browsers doesn\'t support fullscreen'); 
    } 
}); 

i oto HTML:

<div id="videoContainer"> 
     <video>...<source></source> 
     </video> 
     <div> custom controls 
      <button>play/pause</button> 
      <button id="fullscreenBtn" class="enterFullscreenBtn">fullscreen</button> 
     </div> 
</div> 

Answer 2

Pokaż niestandardowy sterownik

#customController{ 
    -------------------; 
    -------------------; 
    -------------------; 
    z-index: 2147483647; 
} 

Ukryj rodziny sterowników

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