Traemos la mejor solución que encontramos on line. Nosotros esperamos que te resulte útil y si deseas comentarnos alguna mejora hazlo libremente.
Solución:
Editar
El cambio significativo fue apuntar a la etiqueta principal: .vidFrame para pantalla completa en lugar de la etiqueta según el comentario de Kaido.
Los controles de video HTML5 necesitan un manejo especial si desea anularlos. Asumo que desea hacer eso ya que los controles ya tienen la función de pantalla completa integrada en los controles. Esta demostración implementa:
classList para alternar el button#fullScreen estados de .on y .off y button#playPause estados de .play y .pause.
:fullscreen pseudo-clase para asegurar .vidBar está en la parte inferior cuando está en modo de pantalla completa.
Shadow DOM Estilos CSS que se necesitan para anular los controles del reproductor nativo.
Fullscreen API métodos específicos del proveedor para entrar y salir del modo de pantalla completa, por supuesto.
No hay control deslizante de volumen, botón de silencio o depurador, solo el botón de pantalla completa (button#fullScreen) y el botón de reproducción (button#playPause). Si los quieres, haz otra pregunta.
Los detalles se comentan en la fuente.
Parece que el Snippet no es completamente funcional, así que aquí hay un funcional Plunker. Si no se puede acceder a esa versión, revise la Plunker incrustado y haga clic en el botón de vista completa:
Manifestación
Nota: SO sandbox ha cambiado, por lo que esta demostración no es completamente funcional, vaya a los enlaces mencionados anteriormente o copie y pegue la demostración en un editor de texto.
Full Screen Video Toggle
Use la API de pantalla completa en el elemento contenedor, no en el video
Como dice @Kaiido en los comentarios:
Tienes que llamar al enterFS método en el elemento contenedor, no en el video.
Entonces, la respuesta es usar la API de pantalla completa en el elemento contenedor en lugar del elemento. Esto permite proporcionar controles personalizados en ese contenedor que ahora está todo en pantalla completa.
Como referencia, esa es la función enterFS() existente de la pregunta:
function enterFS(element)
if (element.requestFullscreen)
element.requestFullscreen();
else if (element.msRequestFullscreen)
element.msRequestFullscreen();
else if (element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if (element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
Publiqué esta respuesta porque tuve que leer la página tres veces para descubrir qué estaba pasando aquí.
Hay gran información en la respuesta de @ zer00ne que es relevante para otros con problemas similares, pero no responde directamente al problema original de @ Costa, que anteriormente solo se respondió en un comentario.
Comentarios y valoraciones del tutorial
Al final de todo puedes encontrar las crónicas de otros desarrolladores, tú además eres capaz insertar el tuyo si te apetece.
