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/

有什么办法可以修复这个问题吗？

- Andrew

---

已在Chrome上测试，对我有效。 - Jonas T

@Andrew，您对此有什么进展吗？我很感兴趣知道问题出在哪里。 - urbananimal

@urbananimal：我花了几个小时进行调查，看起来是Chrome上的MP4文件问题。Appcropolis对我有用，但只能使用ogv源。也许HTML5画布不完全支持mp4视频或存在错误？ - Andrew

Answer 1

对我来说，在Chrome中完美运行！

但是你需要开始播放视频，如果视频没有开始，你会看到一个黑屏。

- bnz

---

不是我的问题... 在 Chrome Canary 中可以运行，但在正式版本中无法运行。 - urbananimal

@Andrew，我也遇到了黑屏问题。你的系统配置是什么？我的是Windows7 Home x64，Chrome 22.0.1229.79 m。 - Sergey

我的系统是Windows 7和Chrome 22.0.1229.79... 教程运行得非常好，但我的代码不行。 - Andrew

你能在私人模式下测试吗？当Jscript执行一次时，Chrome真的很丑。有时它不想加载更改... - bnz

是的，我已经测试过了 - 没有任何变化。我将检查 Chrome 开发版本。 - Andrew

Answer 2

你必须使用事件“seeked”！

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

抱歉我的英语不好，我是法国人

- Duprat