dynamically generating multiple thumbnails from a video src with javascript

Question

Before you say it can't be done please take a look at my train of thought and entertain me. I have read on stackoverflow that it can't be done and how to implement this using ffmpeg and other stuff on the server side which is great and simpleish enough to comprehend .. ive even used an extensiion to Video.js i found on github that makes this one step easier. But none the less what if I dont have a copy of the <video src=... > and I really dont care to get one?

I Do not want to use a server to do this Okay with that out of the way, I understand thanks to a post from Paul Irish that video playback is not a shared aspect of web-kit ports (the code which powers basically every browser ... minus chrome canary now using blink a webkit fork) This kinda makes sense why certain browsers only support certain video containers.

So for the sake of simplicity: I want to make this functionality only available on Chrome and only MPEG-4 AVC video containers, why can't this be done if some how I can actually view each frame of the video while its playedback?

additional note So the generating of video thumbnails is possible using by drawing frames to a canvas, this will only be part of a final solution to my problem, I'm looking to do this each and everytime a video is viewed not store images on my server after a first playback is completed by a user. What I would like to eventually work up to is generating a thumbnail as the video is downloaded that can be viewed while a user uses a dragging scrollbar to ff/rw to a point in the video. So this will need to be done as frames of video come available, not once they have been rendered by the browser for user to view

Answer 1

One can actually feed in a video to the canvas, as seen here in HTML5Doctor. Basically, the line that does the magic is:

canvasContext.drawImage(videoElement,0,0,width,height);

Then you can run a timer that periodically retrieves the frames from the canvas. There are 2 options on this one

1. get raw pixel data
2. get the base64 encoded data

As for saving, send the data to the server to reconstruct an image using that data, and save to disk. I also suggest you size your canvas and video to the size you want your screenshots to be since the video-canvas transfer automatically manages scaling.

Of course, this is limited by the video formats that are supported by the browser. As well as support for canvas and video.

---

Generating thumbnails during first render? You'd run into problems with that since:

• You can't generate all frames unless it's rendered on the video element.

• Suppose you have generated thumbnails during first run and want to use them for further runs. Base64 data is very long, usually 3 times the file size if the image. Raw pixel data array is width x height x 4 in length. The most viable storage candidate is localStorage, which is just 5-10MB depending on the browser.

• No way to cache the images generated into the browser cache (there could be a cache hack that I don't know using data-urls).

I suggest you do it on the server instead. It's too much burden and hassle to do in the client side.