HTML5视频画布

我试图捕捉视频帧图像喜欢这里的图像：HTML5视频画布

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/

任何想法如何解决这个问题？

来源

2012-10-08 Andrew

在测试了Chrome和它为我工作。 –

@Andrew你有这个地方吗？我很想知道问题在哪里。 – urbananimal

@urbananimal：我在调查上花了几个小时，看起来像我的Chrome上的MP4文件问题。 Appcropolis适用于我，但只适用于ogv源。也许有没有完整的HTML5画布支持MP4视频或错误？ – Andrew

适合我的Chrome完美版！

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

来源

2012-10-08 11:45:29 bnz

不适合我...在铬金丝雀工作，但没有发布版本。 – urbananimal

@安德鲁，我也有黑屏。你的系统规格是什么？我的Windows7家庭版64位，Chrome 22.0.1229.79米 – Sergey

我的系统是Windows 7和Chrome 22.0.1229.79 ...教程作品优秀，但我的代码不是 – Andrew

您必须使用事件“seeked”！

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

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

来源

2013-03-08 19:25:29 Duprat

回答

相关问题