Miniaturansicht aus Videodatei über Dateieingabe erstellen

Question

Ich versuche, eine Miniaturvorschau aus einer Videodatei (mp4,3gp) aus einem Formular input type='file' zu erstellen. Viele haben gesagt, dass dies nur serverseitig möglich ist. Ich kann es kaum glauben, da ich erst kürzlich auf diese Fiddle mit HTML5 Canvas und Javascript gestoßen bin.

Thumbnail Fiddle

Das einzige Problem ist dies das Video vorhanden sein muss und der Benutzer spielen klicken, bevor sie auf eine Schaltfläche klicken Sie auf das Bild um es zu erfassen. Ich frage mich, ob es eine Möglichkeit gibt, die gleichen Ergebnisse zu erzielen, ohne dass der Spieler anwesend ist und der Benutzer auf den Button klickt. Zum Beispiel: Der Benutzer klickt auf den Datei-Upload und wählt die Videodatei aus und dann wird eine Miniaturansicht erstellt. Jede Hilfe/Gedanken sind willkommen!

Answer 1

Canvas.drawImage muss auf HTML-Inhalt basieren.

source

here is a simplier jsfiddle

//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); 
} 

Der Vorteil dieser Lösung ist, dass Sie die Miniaturansicht auswählen, können Sie anhand wollen auf die Zeit des Videos.

Answer 2

Kürzlich dies und tat ziemlich einige Tests erforderlich und es bis auf das absolute Minimum siedende https://codepen.io/aertmann/pen/mAVaPx

Es gibt einige Einschränkungen, wo es funktioniert, aber recht gute Browser-Unterstützung zur Zeit sehen: 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();