4.2 The “video” Element and Its Attributes 714.2 The “video” Element and Its Attributes
In the preceding example, two attributes are assigned to the video element: con-
trols and autoplay. The attribute controls tells the browser to display control
elements for the video (see Figure 4.1), and autoplay tells the browser to start
playing the video as soon as this is possible.
Like the canvas element (see Chapter 5, Canvas), the video element belongs to
the category embedded content; in other words it is one of the contents that is
not directly connected to HTML. Within the embedded content, you can include
an alternative solution (fallback) in case the browser does not support the video
element. If this happens in our example in section 4.1, A First Example, the text
Sorry, your browser is unable to play this video appears. Additionally, you could
display a still image from the video. But let’s look at the possible attributes of the
video element in more detail (see Table 4.1).
Table 4.1 Attributes of the “video” element
Attribute Value Information
src url The URL for the video to be played. This attribute
is optional and can be replaced with one or more
source elements, as in our example.
poster url The URL for a picture that the browser displays while
the video is loading.
preload none The browser is not supposed to try loading the video
before the Play button is clicked. This saves band-
width.
preload metadata Only the metadata for the video is loaded (for exam-
ple, length of video, author, copyright).
preload auto In this case the entire video is loaded even before the
user clicks the Play button.
autoplay boolean The browser begins playing the video as soon as
enough data has been received.
controls boolean Displays simple control elements for the video. This
does not determine what these elements should look
like; that is mostly up to the browser manufacturers.
The specification suggests several elements, such as
controls for playback and pausing the video, setting
the volume, an option to skip to another point in the
video (provided the content supports it), switching to
full screen, and possible buttons for subtitles.
loop boolean Tells the browser to repeat playback after reaching
the end of the video.