¿Cómo hacer una imagen de carga al cargar video HTML5?

Question

, ya que el reproductor de video toma tiempo para cargar el video mp4. ¿puede HTML5 admitir reproducir un logotipo de "carga" al cargar video?

porque mis aplicaciones ASP.NET es una página móvil, que necesita el usuario haga clic en el vídeo para reproducir el vídeo (Android, iPhone no soporta la reproducción automática). para que no pueda hacer un logotipo de "carga" como póster; de lo contrario, el usuario lo confundirá. Quiero mostrar un logotipo de carga cuando el usuario hace clic en el botón de reproducción en el iPad.

gracias

Joe

Answer 1

utiliza el póster de la identificación

<video controls="controls" poster="/IMG_LOCATION/IMAGENAME"> 

Más información se puede encontrar http://www.w3schools.com/html5/att_video_poster.asp

Answer 2

Probablemente podría hacerlo con JavaScript mediante la creación de una superposición de imágenes con una GIF animado de "carga" que solo se muestra cuando el video se está cargando y no está listo para jugar.

Tendría que escribir JavaScript para vincularse con Media API para detectar cuándo el video está listo para reproducir y demás (para que pueda volver a ocultar la imagen), pero debería ser posible.

Answer 3

Me tomó demasiado tiempo entender realmente cómo hacer esto, pero lo voy a compartir aquí porque ¡FINALMENTE encontré la 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'); 
    $(this).attr('poster', ''); 
    }); 

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

Answer 4

también una solución sencilla para añadir una imagen de precargador mientras se carga el vídeo: HTML:

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png"> 

el cartel es una imagen transparente de 1 píxel.

CSS:

video { 
    background-image: url(images/preload_30x30.gif); 
    background-repeat: no-repeat; 
    background-size: 30px 30px; 
    background-position: center; 
    } 

Answer 5

Mi solución fue añadir lo siguiente en el interior de la window.fbAsyncInit = function():

var finished_rendering = function() { 
    var el = document.querySelector('div#loading_msg'); 
    el.style.display="none"; 
} 

FB.Event.subscribe('xfbml.render', finished_rendering); 

Encontrado: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12