Show Poster Image directly from Video

Poster Image
Poster Image

Poster image is first instance on video to impress & engage user to play video. By keeping poster image clear & from video will make user interested to click on play button.

In continuation to my earlier post for Video, I further dig-out on video element.

While working on video element we also have to show a still image on video as a placeholder image. Until user click on the video to play it we need to show user a still from video.

Popular ways we know to do this:

  • We add a image in a poster attribute on video element
  • We leave out the poster attribute to show the first frame of the video

First Frame of Video

If we choose to omit the poster image attribute form the video element, video will show the first frame as a poster on video placeholder until user clicks to play video. But in this case, we do not have any control on what the video element will show on user while video loads on browser. It may appear as a blank or dark placeholder on some videos.

Poster Image

If we opt-in to have poster image on video, we need to have another image which shows a image from video.

In this case we are increasing the http request which is not good. To solve this without increasing any http request and having total control on what to show on placeholder of video we can select any one frame from the video itself.

Selected Frame from Video

Yes, we can choose which frame from video should be visible as a poster image on video as placeholder image. To show specific still from video, just append time in second ( #t={second}) at the end of the url while passing the source url of video.

This is it! You will be able to see the placeholder of the video from that specific time.

As always do let me know your feedback in the comment box below.

Ashish Panchal

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *