HTML5视频 - 画布上的图像

Question

我正在尝试将视频帧捕获为像这样的图像：

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

我的简单代码：

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

在IE上它的效果非常好但在Chrome上我总是有黑色画布......

在这里演示：

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

知道如何解决这个问题吗？

Answer 1

适合我在Chrome中使用完美！

但你需要启动视频，如果视频没有启动，你将会出现黑屏。

Answer 2

您必须使用“已搜寻”的活动！

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

对不起我的英语我是法国人