HTML5 video screenshot

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);

Answers


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.


Need Your Help

PyQt4 code not working on PyQt5 (QHeaderView)

python pyqt4 pyqt5

I was using PyQt4 and this code works great.