HTML5 video - image on canvas

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?

@Andrew have you got anywhere with this? I'd be interested to know what the problem is. — urbananimal
@urbananimal: I've spent few hours on investigation and looks like issue with MP4 files on my Chrome. Appcropolis works for me but only with ogv source. Maybe there is no full html5 canvas support with mp4 videos or bug? — Andrew

bnz bnz · Accepted Answer · 2012-10-08T11:45:29

Works perfectly in Chrome for me!

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

HTML5 video - image on canvas

2 Answers