javascript - example - video.js tutorial

Eliminar el flash de carga negro en el video HTML5

Question

He estado creando un sitio web para un juego en línea que juego. En el encabezado tengo un video HTML5 que se reproduce muy brevemente (1 segundo). En Internet Explorer no hay problemas, sin embargo, en Chrome, ya que el video se está cargando, hay un breve destello de pantalla negra. ¿Hay alguna forma en que pueda eliminar este flash o, en su defecto, hacer que sea blanco para que coincida con el fondo? Puedes ver lo que quiero decir aquí http://testingfortagpro.meximas.com/ . Si lo intentas en IE y en Chrome verás la diferencia en cómo se carga el video. Alternativamente, ¿hay alguna manera mejor de implementar esto? He intentado usar un GIF animado, sin embargo, la calidad se reduce significativamente.

¡Gracias!

Answer 1

$ (window) .on (''beforeunload'', function () {$ ("video"). hide ();});

Esto ocultará el elemento de video justo antes de que la ventana se descargue y cargue el siguiente documento.

Answer 2

La sección de carteles de esta publicación de blog indica lo siguiente:

"Si no especifica una imagen de póster, el navegador simplemente puede mostrar una caja negra que llena las dimensiones del elemento".

Parece que no puede solucionar esto simplemente agregando un color de fondo de blanco al elemento de video ... pero puede agregar una imagen de póster simple en blanco como:

<video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" >
  <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4">
</video>

Answer 3

Poner un atributo de póster en la etiqueta de video no impidió que el cuadro negro dejara de parpadear cuando el usuario actualizó la página; sin embargo, utilicé la función de ocultar en el evento "antes de descargar" y ahora el flash negro desaparece.

$(window).on(''beforeunload'', function() {
   $("video").hide();
});

Answer 4

Puedes usar el póster gif transparente:

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Pero eso no fue suficiente para eliminar el parpadeo en Firefox. Terminé ocultando el video hasta que se está reproduciendo:

<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility=''visible'';},100);">

Ajusta el tiempo de espera como mejor te parezca. Cuando no uso la reproducción automática, tuve que aumentarla hasta 400 ms.

Answer 5

Tuve el mismo problema con el parpadeo en Firefox, incluso con un conjunto de atributos de póster. Arreglé esto agregando una imagen de fondo a la etiqueta de video que correspondía al primer cuadro de mi video.

Answer 6

Tuve el mismo problema y lo arreglé ocultando el elemento de video usando la pantalla CSS: ninguno hasta que el elemento de video señaló que había terminado de cargarse a través de su evento onLoadedData, y en respuesta a ese evento configuré display: block.

Eso se libró del flash negro.