webkit - dynamically generating multiple thumbnails from a video src with javascript -

before can't done please take @ train of thought , entertain me. have read on stackoverflow can't done , how implement using ffmpeg , other stuff on server side great , simpleish enough comprehend .. ive used extensiion video.js found on github makes 1 step easier. none less if dont have copy of <video src=... > , dont care one?

i not want use server this okay out of way, understand post paul irish video playback not shared aspect of web-kit ports (the code powers every browser ... minus chrome canary using blink webkit fork) kinda makes sense why browsers support video containers.

so sake of simplicity: want make functionality available on chrome , mpeg-4 avc video containers, why can't done if how can view each frame of video while playedback?

additional note generating of video thumbnails possible using drawing frames canvas, part of final solution problem, i'm looking each , everytime video viewed not store images on server after first playback completed user. work generating thumbnail video downloaded can viewed while user uses dragging scrollbar ff/rw point in video. need done frames of video come available, not once have been rendered browser user view

one can feed in video canvas, as seen here in html5doctor. basically, line magic is:

canvascontext.drawimage(videoelement,0,0,width,height); 

then can run timer periodically retrieves frames canvas. there 2 options on one

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

as saving, send data server reconstruct image using data, , save disk. suggest size canvas , video size want screenshots since video-canvas transfer automatically manages scaling.

of course, limited video formats supported browser. support canvas , video.

---

generating thumbnails during first render? you'd run problems since:

• you can't generate frames unless it's rendered on video element.

• suppose have generated thumbnails during first run , want use them further runs. base64 data long, 3 times file size if image. raw pixel data array width x height x 4 in length. viable storage candidate localstorage, 5-10mb depending on browser.

• no way cache images generated browser cache (there cache hack don't know using data-urls).

i suggest on server instead. it's burden , hassle in client side.