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

Question

Me pregunto si hay alguna forma 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 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 poster tradicionalmente funciona, pero eso no es una preocupación.

Answer 1

hay un plugin Popcorn.js llamada Popcorn.capture que permitirá crear carteles de cualquier fotograma de vídeo HTML5.

hay una limitación que se impone por la navegador que prohíbe leer datos de píxeles de los recursos solicitados en todos los dominios (utilizando la API canvas para registrar el valor actual de un cuadro). 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 póster con este plugin 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 2

Puede establecer preload='auto' en el elemento de vídeo para cargar el primer fotograma del vídeo de forma automática.

Answer 3

Recientemente 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 preload=metadata funciona en dispositivos de escritorio y Android pero no en iPhone.

Para iPhones tuve que configurarlo en autoplay para 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 control para iPhone usando la respuesta de Pavan que se encuentra aquí. Detect iPhone Browser. Luego, use la etiqueta de video adecuada con o sin autoplay dependiendo del 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">'; 
}