7

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,

1

1 Answer 1

8

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.

1
  • What Popcorn.capture.js does is exactly what I need. Thanks!
    – mihaipaun
    Jul 16, 2012 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.