HTML5视频-画布上的图像

Question

I'm trying to capture video frame as image like here:

http://appcropolis.com/using-html5-canvas-to-capture-frames-from-a-video/

My simple code:

var video = document.getElementById("video");
var bottom = document.getElementById("bottom"); 


var canvas = document.createElement('canvas');

canvas.width  = 500;
canvas.height = 282;

var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 282); 

bottom.innerHTML = '';
bottom.appendChild(canvas);

On IE it works excellent but on Chrome I've always got black canvas...

Demo here:

http://html5-canvas-test.vipserv.org/

Any idea how to fix this?

Answer 1

Works perfect in Chrome for me!

But you need to start the video, if the video isnt started you'll get a black screen.

Answer 2

You must use the event "seeked" !

$(video).seeked(function() {
    ctx.drawImage(video, 0, 0, 500, 282); 
});

Sorry for my English i'm french