javascript - create - Crea una miniatura del archivo de video a través de la entrada de archivos

create thumbnail video javascript

Question

Estoy intentando crear una vista previa en miniatura de un archivo de video (mp4, 3gp) de un formulario input type=''file'' . Muchos han dicho que esto se puede hacer solo en el lado del servidor. Encuentro esto difícil de creer ya que recientemente descubrí este Fiddle usando HTML5 Canvas y Javascript.

Miniatura violín

El único problema es que esto requiere que el video esté presente y el usuario haga clic en reproducir antes de hacer clic en un botón para capturar la miniatura. Me pregunto si hay una manera de obtener los mismos resultados sin que el jugador esté presente y el usuario haga clic en el botón. Por ejemplo: el usuario hace clic en cargar archivo y selecciona el archivo de video y luego se genera la miniatura. Cualquier ayuda / pensamientos son bienvenidos!

Answer 1

Canvas.drawImage debe basarse en el contenido html.

source

aquí hay un jsfiddle simplier

//and code
function capture(){
    var canvas = document.getElementById(''canvas'');
    var video = document.getElementById(''video'');
    canvas.getContext(''2d'').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

La ventaja de esta solución es que puede seleccionar la miniatura que desea según el momento del video.

Answer 2

Hace poco necesité esto e hice algunas pruebas y lo reduje al mínimo, consulte https://codepen.io/aertmann/pen/mAVaPx

Hay algunas limitaciones donde funciona, pero bastante buena compatibilidad con el navegador actualmente: Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+).

 video.preload = ''metadata'';
 video.src = url;
 // Load video in Safari / IE11
 video.muted = true;
 video.playsInline = true;
 video.play();