HTML and CSS Reference
In-Depth Information
5.4 Displaying a Placeholder Image Before Video Plays
Problem
You want to display a still frame, or poster image, before the user starts the video.
Solution
Add the
poster
attribute with the placeholder image file path as the value:
<video controls width="640" height="360"
poster="video_still.png"
>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
Your device does not support HTML5 video.
</video>
Discussion
Poster images can be a nice user enhancement, especially when the video doesn't load
or can't be displayed.
Consider a single-source
.mp4
video viewed in Firefox, as shown in
Figure 5-2
.
Figure 5-2. Since Firefox doesn't support .mp4 files, the browser displays a dark gray box if there is
no poster image specified
