¿Cómo agregar la imagen del cargador a video HTML5?

Question

Junto con la imagen del póster, quiero que se muestre una imagen del cargador (un archivo .gif animado) mientras se descarga el video. Como es posible ?

Answer 1

Puede adjuntar un detector al evento loadstart del video y usarlo para superponer un GIF animado en la parte superior del elemento de video, y luego ocultar la superposición de carga una vez que el evento loadeddata se desencadena. Consulte The W3C's media events draft para obtener una lista de eventos en los que puede enganchar.

También tienen un demo page for media events.

Answer 2

Esto es bastante complicado, debe escuchar varios eventos de video para mostrar/ocultar & el ancho de actualización de la imagen del cargador correctamente. Esos eventos incluyen (pero no se limitan a): loadstart, progress, loadeddata, waiting, seeking, seeked. Puede usar un determinado reproductor de código abierto (por ejemplo, jPlayer) o descargar su fuente para examinar más a fondo.

Answer 3

Una manera económica podría ser utilizar un GIF animado en el atributo poster que se reemplazará cuando el video comience a reproducirse. Ejemplo:

<video poster="loading.gif" preload="auto" controls autoplay> 
    <source type="video/mp4" src="video.mp4"/> 
</video> 

Answer 4

Me tomó demasiado tiempo para entender realmente la manera de hacer esto, pero voy a compartir aquí porque finalmente encontró una manera! Lo cual es ridículo cuando lo piensas, porque cargar es algo que todos los videos tienen que hacer. Pensarías que lo habrían tenido en cuenta al crear el estándar de video html5.

Mi teoría original que pensé que debería haber trabajado (pero no lo haría) fue la carga de imágenes bg esta

1. Añadir a video al cargar a través de js y css
2. Quitar cuando esté listo para jugar

Simple, ¿verdad? El problema era que no podía mostrar la imagen de fondo cuando se configuraban los elementos de origen, o se configuraba el atributo video.src. El golpe final de genio/suerte fue descubrir (a través de la experimentación) que la imagen de fondo no desaparecerá si el póster está configurado para algo. Estoy usando una imagen de póster falso, pero me imagino que funcionaría también con una imagen transparente de 1x1 (pero ¿por qué preocuparse por tener otra imagen?). Esto hace que esto sea probablemente una especie de truco, pero funciona y no tengo que agregar marcas adicionales a mi código, lo que significa que funcionará en todos mis proyectos usando video html5. (Clase de carga aplicado al vídeo con JS)

HTML

<video controls="" poster="data:image/gif,AAAA"> 
    <source src="yourvid.mp4" 
</video> 

CSS

video.loading { 
    background: black url(/images/loader.gif) center center no-repeat; 
} 

JS

$('#video_id').on('loadstart', function (event) { 
    $(this).addClass('loading') 
    }); 
    $('#video_id').on('canplay', function (event) { 
    $(this).removeClass('loading') 
    }); 

Esto funciona perfectamente para mí, pero sólo probado en Chrome y Safari en Mac. ¡Avíseme si alguien encuentra errores o mejoras!

Answer 5

Aquí está mi solución para este problema, ya que no parece la respuesta de pixelearth para trabajar en Firefox (probablemente un problema con el cartel falso)

HTML

<video id="video1" height="236" preload="auto" controls> 
    <source src="yourVideo.mp4"> 
    Your browser does not support HTML5 video. 
</video> 

JS

$('#video1').on('loadstart', function (event) { 
    $(this).addClass('background'); 
    $(this).attr("poster", "/your/loading.gif"); 
}); 

$('#video1').on('canplay', function (event) { 
    $(this).removeClass('background'); 
    $(this).removeAttr("poster"); 
}); 

CSS

video.background { 
    background: black 
} 

Con esta respuesta no tiene que perder el tiempo con el cartel falso o los atributos de abuso para los propósitos que no fueron hechos. Espero que esto ayude.

P.S. Por supuesto, puede agregar algunos eventos más para agregar el atributo del póster, p. si no puede jugar más en el medio del video y necesita más buffering

Puede encontrar una jsFiddle que muestra mi código here