CODEWITHSUNDEEP
javascripthtmlhtml5-videohtml5-canvas
Andrew
Andrew

Reputation: 41

HTML5 video - image on canvas

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?

Upvotes: 3

Views: 3170

Answers (2)

bnz
bnz

Reputation: 37

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.

Upvotes: 1

Duprat
Duprat

Reputation: 1

You must use the event "seeked" !

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

Sorry for my English i'm french

Upvotes: 0

Related Questions