Capture the first frame of embedded video

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

+4
source share
2 answers

Actually, I'm pretty sure that you can use HTML5. Take a look at this link: HTML5 Video Destruction .

It copies the video frame to another canvas every 33 ms. You can play around with it and see if you can capture the first frame when the video starts.

I can study it further if you like (it fascinates me)

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

You need to open this in Google Chrome. Firefox does not support mp4 (I think).

The first time I ever did anything with HTML5, I CAN'T wait until it will be in most browsers :)

EDIT EDIT: Ok, I also downloaded the version of this .gg video and set up my web server to properly control the type of video. Firefox should also work in this small example.

EDIT EDIT EDIT: Nitpickers needing a source here:

// 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 some data loaded for the video, should be at least 1 frame here. vid.addEventListener("loadeddata", function() { // Let 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); 
+16
source

simple answer: no.

-1
source

All Articles