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

回答

相關問題