HTML and CSS Reference
Preloading video data
The preload attribute suggests whether any of the video data is preloaded when the
page loads, before the user has clicked play on the video. It can take the values none ,
metadata , or auto . If it's set to an empty string ( "" ), it will map to the auto state. It
is a good idea to include this attribute because the default behavior for preloading is not
standardized and is up to the web browsers to decide for themselves; however, that be-
ing said, it is not a strict instruction and is only an advisory attribute to the web browser.
If needed, the web browser can override what is set here based on any user preferences
or other factors (such as the autoplay attribute being present). For instance, a user on
a mobile phone may not want to preload video to save bandwidth, and a mobile browser
may set this as a preference that is then enforced on pages the user visits, despite the
value set in the preload attribute.
Because the preload attribute is advisory, the meaning of the different values are
not to be taken literally. A value of none suggests that the video should not be preloaded
at all (including metadata information). A value of metadata suggests that video data
should be loaded up to, but not including, the video itself. Metadata may include the
duration, dimensions, and so on. A value of auto suggests anything may be preloaded,
which means perhaps only the metadata, but it could mean the entire video itself is pre-
Adding a poster image
The poster attribute sets a poster image for the video, which is an image that is shown
in place of the video before the video begins playing ( Figure 5-7 ). This image could be
anything but it is often the first frame of the video, since the poster image is intended to
give the user an idea of what the video looks like. The value given is the location of the
image to use, such as this:
<video width="320" height="240" controls poster="trailer-
This code would use the poster image trailer-poster.jpg , located in the same
directory as the HTML page containing this code.
Note In a production environment, you would want to place images in their own dir-
ectory to keep your website files organized.