HTML Media preload and poster Attributes

A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.

What You Need to Know

Preload is a suggestion about how much media the browser may fetch early, not a promise. Poster is the image displayed before a video starts, helping people decide whether to play it.

In this example: display a poster before video play.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<video controls preload="metadata" poster="images/robot-poster.jpg" width="600">
    <source src="media/robot-demo.mp4" type="video/mp4">
    Video is unavailable.
</video>

Let’s Read the Code

poster: Poster provides a preview picture for a video.
<video>: The video element creates a video player and can include alternative formats.
<source>: A source points to a media file or image choice with a type or other condition.
controls: Controls asks the browser to provide its native audio or video player controls.

What the example shows: Preload=metadata hints that the browser may fetch duration and other metadata; poster displays a preview image.

What Happens in the Browser?

The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.

What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.

Your Turn

Change preload to none and inspect network requests before playback.

Common Beginner Mistakes

Leaving out real media files or understandable text alternatives.
Preload is a hint, not a promise that a specific number of bytes will download.

Key Takeaways

Preload is a suggestion about how much media the browser may fetch early, not a promise.
poster: Poster provides a preview picture for a video.
If the resource cannot load, users still need enough text to understand what was meant to be there.