Back to api.video Glossary

Poster

Poster

What is the video poster HTML5 attribute?

The video poster is the HTML5 attribute for the video tag that defines the image that appears in front of a video before it starts playing.

If no poster tag is defined in the video tag, the browser will display the first frame of the video. Since many videos begin with a black screen, this is not visually appealing, so a different screenshot from the video, or perhaps an unrelated image is used.

A list of different live streams, two are news, one is Rick Astley, one is Doug

The poster tag points to an image:

poster=https://example.com/poster.jpg

There is no way to serve alternative formats with the poster tag, so typically a format that is supported in many browsers (like jpg or png) are used.

 

Note: The poster image is downloaded before the video, so if your video is going to autoplay, this will block the video from loading. Additionally, creating a poster of the first frame of the video is redundant, as the player will do this anyway, and this results in that frame being downloaded twice.

Poster at api.video

  • The poster tag is called thumbnail at api.video.
  • The default thumbnail is selected from the "middle frame" of the video (example: the 15 minute point of a 30 minute video).

Changing the thumbnail

  • Set a frame from the video: The pick a thumbnail endpoint sends a timestamp where the image should be extracted from the video and set as the poster.
  • Upload a Thumbnail: Upload a jpg image to be used as the video thumbnail.

Related content

glossaryglossary