javascript - portada - ¿Utiliza dinámicamente el primer fotograma como póster en video HTML5?

video src

Question

Me pregunto si hay alguna manera directa de lograr este efecto, sin necesidad de código de fondo para extraer un marco, guardarlo como un jpg y la base de datos en alguna parte.

Un efecto por el cual el primer fotograma del video simplemente aparece como el póster cuando el video se carga sería tan útil (solo funcionaría si el navegador puede reproducir el video obviamente, lo que podría ser un poco diferente de cómo funciona tradicionalmente el poster , pero eso no es una preocupación.

Answer 1

¿Has probado lo siguiente?

solo añada el tiempo en segundos # t = {segundos} a la URL fuente:

<video width="300" height="150">
   <source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>

Elegí una fracción de segundo ( 0.1 ) para mantener el número de fotogramas pequeños, porque sospecho que si pone 1 segundo, "precargará" el primer 1 segundo de video (es decir, 24 fotogramas o más ... ) Por si acaso ...

Funciona bien en Chrome y Firefox en el escritorio :)
No funciona en el móvil Android, sin embargo :(
No he probado en iOS, iPhone, IE todavía?

Answer 2

Existe un complemento de Popcorn.js llamado Popcorn.capture que le permitirá crear pósters desde cualquier fotograma de su video HTML5.

Existe una limitación impuesta por el navegador que prohíbe leer los datos de píxeles de los recursos solicitados en todos los dominios (utilizando la API de lienzo para registrar el valor actual de un marco). El video fuente debe estar alojado en el mismo dominio que el script y la página html que lo está solicitando para que este enfoque funcione.

El código para crear un póster con este complemento es bastante simple:

// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );

// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {

  this.currentTime( 10 ).capture();

});

Answer 3

Hace poco hice esto para un proyecto reciente que funciona en computadoras de escritorio y dispositivos móviles. El truco era hacer que funcionara en iPhone.

Configuración de preload=metadata funcionan en el escritorio y dispositivos Android pero no en el iPhone.

Para los iPhones, tuve que configurarlo para que se autoplay modo que la imagen del póster aparezca automáticamente en la carga inicial. Los iPhones evitarán que el video se reproduzca automáticamente, pero la imagen del póster aparecerá como resultado.

Tenía que hacer un cheque para iPhone usando la respuesta de Pavan que se encuentra aquí. Detecta el navegador de iPhone . Luego, use la etiqueta de video adecuada con o sin autoplay según el dispositivo.

var agent = navigator.userAgent;
var isIphone = ((agent.indexOf(''iPhone'') != -1) || (agent.indexOf(''iPod'') != -1)) ;

$videoTag = "";
if(isIphone()) {
    $videoTag = ''<video controls autoplay preload="metadata">'';
} else {
    $videoTag = ''<video controls preload="metadata">'';
}

Answer 4

Puede configurar preload=''auto'' en el elemento de video para cargar el primer fotograma del video automáticamente.