HTML5 videosu üzerinde tam ekran görüntülendiğinde özel kontroller hala geçerli mi?

Question

HTML5 videom için özel kontroller yaptım ancak tam ekrana gittiğimde bu CSS'nin nasıl uygulanacağını bilmiyorum.

İşte denetimlerimi temel alan [website].

Bu sitede tam ekran düğmesini tıklattığınızda özel denetimlerin kaybolduğunu ve videonun varsayılan <video> denetimlerine döndüğünü fark edeceksiniz.

Tam ekrana gittiğinizde bu özel denetimlerin stil/CSS'nin nasıl uygulanacağını bilen var mı?

Answer 1

Kendi sorumu cevapladım, anahtar, özel denetimlerin tam ekran almak istediğiniz videoyu içeren içinde olmasıdır. Aşağıdaki kodumda, bu "videoContainer" olarak adlandırılır.

Bunu çözmek için kullandığım bağlantı. http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

burada hem giren ve webkit ve mozilla tarayıcılarda tam ekran modundan çıkış için JS kod: Burada

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

ve HTML oluyor:

<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

göster özel kontrolör

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

yerli kontrolör

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