HTML poster Attribute

Description

The HTML poster attribute is used in conjunction with the <video> element to specify an image that will be shown as a placeholder before the video is played. This image is displayed to the user while the video file is downloading, or until the user hits the play button. The poster attribute helps in providing a visual context or preview of the video content, making it more appealing for users to engage with the video. It's particularly useful for improving user experience by offering a snapshot or a teaser of the video's content.

The value of the poster attribute must be a valid URL, which points to an image file that you want to display as the placeholder. The image format can be any that is supported by the browser, such as JPEG, PNG, or GIF. If the poster attribute is not specified, the browser may show the first frame of the video or a default black screen as the placeholder.

Here's a simple example of how to use the poster attribute in a <video> element:

<video controls poster="path/to/your/image.jpg">
  <source src="path/to/your/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In this example, "path/to/your/image.jpg" should be replaced with the actual path to the image you wish to display as a poster, and "path/to/your/video.mp4" with the path to the video file. The controls attribute is also added to allow users to play, pause, and control the video playback.

Syntax

<video poster="URL" />

Values

URLURL of the poster image.

Applies To

The poster attribute can be used on the following html elements.

<video>

Example

HTML

<video width="400" height="300" controls poster="images/poster.png">

  <source src="images/earth.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

Result

Editor