Capture first frame of an embedded video

Question

Hi,

I want to capture the first frame of an embedded video as an image without using any server side scripting. Probably with javascript, is it possible?

Answer 1

simple answer: no.

Answer 2

Actually, pretty sure you can, using HTML5. Take a look at this link: HTML5 Video Destruction.

It's copying the video frame into another canvas every 33ms. You could play around with this and see if you can capture the first frame when the video starts running.

I can look into this further if you like (it fascinates me)

EDIT: oh my GOD THIS IS COOL. I just came up with a solution. Go to sambro.is-super-awesome.com/videofirstframe/

You need to open this in Google Chrome. Firefox doesn't support mp4 (I think).

First time I've ever done anything with HTML5, I CANNOT wait until this is in the majority of browsers :)

EDIT EDIT: Okay I uploaded the .ogg version of this video too, and setup my web server to handle the video type correctly, Firefox should work in this little example too.

EDIT EDIT EDIT: Nitpickers wanting source up here, well here it is:

// Create a video element.
var vid = document.createElement("video");

// We don't want it to start playing yet.
vid.autoplay = false;
vid.loop = false;

// No need for user to see the video itself.
vid.style.display = "none";

// This will fire when there's some data loaded for the video, should be at least 1 frame here.
vid.addEventListener("loadeddata", function()
{
    // Let's wait another 100ms just in case?
    setTimeout(function()
    {
        // Create a canvas element, this is what user sees.
        var canvas = document.createElement("canvas");

        // Set it to same dimensions as video.
        canvas.width = vid.videoWidth;
        canvas.height = vid.videoHeight;

        // Put it on page.
        document.getElementById("done").innerHTML = "";
        document.getElementById("done").appendChild(canvas);

        // Get the drawing context for canvas.
        var ctx = canvas.getContext("2d");

        // Draw the current frame of video onto canvas.
        ctx.drawImage(vid, 0, 0);

        // Done!
    });
}, false);

// Have to include .ogv for firefox. I don't think this is working atm because my webserver isn't serving up
// videos properly.
if(BrowserDetect.browser == "Firefox")
{
var source = document.createElement("source");
source.src = "BigBuckBunny_640x360.ogv";
source.type = "video/ogg";
vid.appendChild(source);
}
else
{
var source = document.createElement("source");
source.src = "BigBuckBunny_640x360.mp4";
source.type = "video/mp4";
vid.appendChild(source);
}

// Add video to document to start loading process now.
document.body.appendChild(vid);