Poster Image

Show Poster Image directly from Video

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.

<video width="300" height="150">
   <source src="BigBuckBunny.mp4" type="video/mp4" />
</video>

Poster Image

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

<video poster="path/to/the/image.jpg" width="300" height="150">
   <source src="BigBuckBunny.mp4#t=2" type="video/mp4" />
</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.

<video width="300" height="150">
   <source src="BigBuckBunny.mp4#t=2" type="video/mp4" />
</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.

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

4 comments On Show Poster Image directly from Video

  • My first time visiting, been looking around and very much like the way in which you compose your posts. This article is exactly the info I was looking for. Works just as stated but it should be noted that video begins playback from placeholder frame not beginning of video. None the less great site!

  • As above said, the video plays from that frame, but if you’re just looking for a simple placeholder #t=1 is perfect and plays basically at the beginning so it’s a nice “hack” to just get the job done!

    Thanks for this!

  • This is just what i wanted. Thanks ton buddy!!

  • Super explanation, cheers 🙂

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.