¿Todavía se aplican controles personalizados cuando aparece la pantalla completa en un video HTML5?

Question

He hecho controles personalizados para mi video HTML5, pero no sé cómo aplicar ese CSS cuando voy a pantalla completa.

Aquí está el [website] He basado mis controles en.

En este sitio, observará que al hacer clic en el botón de pantalla completa se pierden los controles personalizados y el video revierte a los controles predeterminados <video>.

¿Alguien sabe cómo tener estos controles personalizados de estilo/CSS todavía se aplican cuando se muestra a pantalla completa?

Answer 1

respondí mi propia pregunta, la clave es que los controles personalizados están dentro del <div> que incluye el video que desea tomar a pantalla completa. En mi código a continuación, este <div> se llama "videoContainer".

Aquí está el enlace que usé para resolver esto. http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

aquí está el código JS tanto para entrar y salir del modo de pantalla completa en WebKit y Mozilla navegadores:

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

y aquí está el código 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

controlador de presentación personalizada

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

Ocultar controlador nativo

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