CODEWITHSUNDEEP
htmlvideohtml5-videothumbnails
David
David

Reputation: 583

Generating a thumbnail from standard html5 video player?

I have a standard html5 video player but there is no thumbnail displayed before the video plays (similar to how YouTube works). Is it possible to get a thumbnail? I was thinking of taking the first frame of the video and displaying that but I'm not sure if that can be done. Any ideas?

Upvotes: 1

Views: 4168

Answers (1)

Offbeatmammal
Offbeatmammal

Reputation: 8226

with the HTML5 <video> element you have the poster attribute which will let you do this, eg:

<video id="myVideo" controls poster="http://{uri}/images/myVideoPoster.png">...

but you will still need to generate the poster image. For that you could use something like ffmpeg to extract a frame - either the very first, or one for a couple of seconds in, to display eg:

ffmpeg -i {input file} -ss 00:02:30 -vframes 1 -s 128x72 {image}

-ss is the timestamp for the frame, and the -s parameter is the size of the output image

Depending on your platform, you could do this automatically using something like paperclip for Ruby (eg https://stackoverflow.com/questions/21341723/using-paperclip-with-video-upload-to-get-poster/21368348#21368348)

Upvotes: 1

Related Questions