I'm trying to take a screenshot of video with predefined time in the movie. So I tried it with the canvas element. The thing is that the video must be playing when you draw the image of the video, but I need the image to still be paused. So I tried this:

video.play();
context.drawImage(video,0,0,canvas.width,canvas.height);
video.pause();

But as you probably can imagine, the video pauses before the canvas is done drawing, resulting in no screenshot. So is there a callback function for drawImage? In my case, the drawing process takes about 50ms, but it doesn't feel safe to do:

setTimeout(function() { video.pause(); }, 50);

I'm trying to take a screenshot of video with predefined time in the movie. So I tried it with the canvas element. The thing is that the video must be playing when you draw the image of the video, but I need the image to still be paused. So I tried this:

video.play();
context.drawImage(video,0,0,canvas.width,canvas.height);
video.pause();

But as you probably can imagine, the video pauses before the canvas is done drawing, resulting in no screenshot. So is there a callback function for drawImage? In my case, the drawing process takes about 50ms, but it doesn't feel safe to do:

setTimeout(function() { video.pause(); }, 50);

• javascript
• html
• video
• canvas
• screenshot

• hehe, seems like these canvas and video questions is hard to find an answer for – tbleckert Commented Dec 2, 2010 at 10:46
• check out this article, should be helpful and has a video screenshot demo with HTML5 canvas: techslides./create-youtube-screenshots-with-html5-and-canvas – iwek Commented Jul 20, 2012 at 13:41

3 Answers 3

Rather than pausing you could try setting the video's playbackrate to something very low (or zero if that works?):

video.playbackRate = 0.0001; // or 0

This will effectively pause the video for you.

You could also set the canvas to black, tranparency 0.99 and then scan the resulting image in your timeout for a non-black pixel:

setTimeout(function() { 
  pixel = context.getImageData(image.width/2, image.height/2, 1, 1);
  // do something with the pixel, kick off another timeout if it is still has transparency
}, 50);

When using the last method the video must be from the same domain as the script, and will not work on local files because of security constraints.

I'm not sure this is what you're after, but have you tried taking the screenshot manually using MWSnap? It freezes the screen while you are taking the screenshot so I guess it might work for you.

Hm...it seems like it actually is possible to draw an image from a paused video. Just keep the interval going from the beginning.