How can different screenshots of a HTML5 video be taken using JavaScript?

Question

I have been working with the HTML5 video tag and I want to achieve one thing, I need a number of screenshots of different parts of the video presented at the same time, like a set of thumbnails below the original video.

So far, I have tried with various methods that I have found online, but no success so far.

What I want to achieve is something like this: http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/index.html

Any help would be appreciated, thanks in advance.

Answer 1

Have you tried "javaScript canvas snapshot"?

http://html2canvas.hertzen.com/

Can you take a "screenshot" of the page using Canvas?

Using HTML5/Canvas/JavaScript to take screenshots

There are also "headless webkit browsers" if you want to this semi-automatically on your desktop &/or server with Node.jx

Answer 2

This is not possible. You cannot access the data in the video stream to get the screenshots out from JavaScript. You'll have to do this server-side.