HTML5 video screenshot

Question

Ich versuche, einen Screenshot des Videos mit vordefinierter Zeit im Film zu machen. Also habe ich es mit dem Canvas-Element versucht. Die Sache ist, dass das Video abgespielt werden muss, wenn Sie das Bild des Videos zeichnen, aber ich brauche das Bild immer noch pausiert. Also habe ich versucht, dies:

video.play(); 
context.drawImage(video,0,0,canvas.width,canvas.height); 
video.pause(); 

Aber wie Sie sich wahrscheinlich vorstellen können, pausiert das Video vor der Leinwand Zeichnung gemacht wird, in keiner Screenshot führt. Gibt es eine Callback-Funktion für drawImage? In meinem Fall nimmt der Ziehprozess über 50ms, aber es ist nicht sicher fühlen zu tun:

setTimeout(function() { video.pause(); }, 50); 

Answer 1

Hm ... es scheint, als ob es tatsächlich möglich ist, ein Bild von einem pausierten Video zu zeichnen. Halte einfach das Intervall von Anfang an.

Answer 2

Ich bin nicht sicher, das ist, was Sie nach, aber haben Sie den Screenshot manuell versucht, unter Verwendung von MWSnap? Es friert den Bildschirm ein, während Sie den Screenshot machen, also könnte es für Sie funktionieren.

Answer 3

Anstatt Sie Pausieren könnte versuchen, die Videos playbackrate zu etwas sehr niedriger Einstellung (oder Null, wenn das funktioniert?):

video.playbackRate = 0.0001; // or 0 

Dies wird das Video für Sie effektiv unterbrechen.

Sie könnten auch die Leinwand schwarz, tranparency 0,99 eingestellt und dann scannen Sie das resultierende Bild in Ihrem Timeout für ein nicht-schwarzes Pixel:

setTimeout(function() { 
    pixel = context.getImageData(image.width/2, image.height/2, 1, 1); 
    // do something with the pixel, kick off another timeout if it is still has transparency 
}, 50); 

Wenn die letzte Methode muss das Video aus dem gleichen sein Domäne als Skript und wird aufgrund von Sicherheitseinschränkungen nicht in lokalen Dateien ausgeführt.