Generating a random preview image on a HTML5 video tag

Question

Is it possible to capture a snapshot of a video that's loaded using the HTML5 video element and use that as a preview image until the video loads or the play event is triggered? I know about the poster attribute but I want the thumbnail to be self generated, like a random frame from the video. Sort of what YouTube/Vimeo does.

Thanks,

Answer 1

I don't think that this is possible in pure HTML5. Principally because the stream is not loaded when you see the 'object' in the webpage so the client can't get the desired frame.

However, the best option for you is to save / cache the 'random frame' before loading the page and then use it as the poster of the video. This will allow you to reduce the client work and save the bandwith.

check THIS, which is the first thing that I've found (if you're using PHP and you want a 'quick and dirty' way to get the frame)

Update

Apparently HERE there is a solution with popcorn.js BUT it seems that you can't do it in the way that (I suppose) you need.

This because it would be possible to do this only inside the same domain due to browser security issues.