javascript - create - Crea una miniatura del archivo de video a través de la entrada de archivos
create thumbnail video javascript (2)
Canvas.drawImage debe basarse en el contenido html.
//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.
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.
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!
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();