Question

I’ve recently created a helper class for capturing screenshots of video tags. Currently the class includes a single method for capturing, which uses a canvas. This all works as intended; taking a screenshot, or capture, of the video’s current frame [currentTime].

var VideoSnapper = {
    captureAsCanvas: function (video, size)
    {
        // create a canvas, set the width and height, and draw the video
        var canvas = $('<canvas />').attr({ width: size.width, height: size.height })[0];
        canvas.getContext('2d').drawImage(video, 0, 0, size.width, size.height)

        return canvas;
    }
}

Here’s jsFiddle demo’ing the code

I want to expand this further to allow for an optional time parameter to be passed in, that captures a screenshot of the given time within the video. I’ve tried updating the time on the video, capturing, and then changing the time back, but to no success.

Any suggestions or ideas are greatly appreciated.

Answer 1

If you seek video to any position, then you have to wait for the seeked event. Otherwise, the video does not load. I’ve just made this example so I hope it helps you. http://jsfiddle.net/vphyr/ Also check out this http://www.w3.org/wiki/HTML/Elements/video for more information about Video element.