Poster and preview
Set preview behavior with the poster attribute and preload.
The poster attribute
The poster attribute sets the cover image shown before the video plays. Its value is the path to an image file (e.g. poster="/covers/black-sea.jpg"). The image stays visible until the user presses play.
A poster stops the page from looking empty before the first frame loads and gives a hint about the video content. Accessible players prefer a poster.
The preload attribute
The preload attribute tells the browser how much of the video to load ahead of time. It takes three values:
auto: caches the whole video.metadata: loads only metadata such as duration and dimensions.none: loads nothing until the user plays.
For mobile data savings, metadata offers a good balance.
Exercise Add poster and preload
Take the video from the previous lesson. Add poster="/covers/black-sea.jpg" and preload="metadata" attributes to the <video controls> tag. Keep the rest unchanged.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nature Doc: Black Sea</title>
</head>
<body>
<video controls poster="/covers/black-sea.jpg" preload="metadata">
<source src="/videos/black-sea.mp4" type="video/mp4">
<source src="/videos/black-sea.webm" type="video/webm">
<track kind="captions" src="/captions/black-sea-en.vtt" srclang="en" label="English">
<track kind="captions" src="/captions/black-sea-tr.vtt" srclang="tr" label="Turkish">
</video>
</body>
</html>Test yourself
-
Which preload value prevents the video from loading until the user plays it?
- auto
- metadata
- lazy
- none
Show answer
none — Correct! preload="none" prevents the video from loading until the user plays it.
-
Write the path to the poster image
<video controls poster="____" preload="metadata"></video>Show answer
<video controls poster="/covers/black-sea.jpg" preload="metadata"></video> -
Match the attribute to its purpose.
- poster
- cover image
- preload
- preload amount
- controls
- play buttons
- autoplay
- auto-start