Lesson 1: Playing video CHAPTER 11 441
Configuring the
The <video> element can be configured to provide the behavior you need for your webpage.
The following is the list of attributes you can use to configure the <video> element to suit
your needs.
■■autoplay pecifies that video starts playing immediately.S
■■controls pecifies that the play/pause button, video cursor, and maximize be S
displayed.
■■height Indicates the height in pixels of the rendered <video> element.
■■loop pecifies that the video will repeat when it has reached the end of its stream.S
■■muted pecifies that the audio is silent.S
■■poster pecifies that the URL of an image is to be shown when the video is not S
playing.
■■preload pecifies how the video should be loaded when the page loads. It can be set S
to auto, metadata, or none. The auto setting starts loading the video when the page
loads. The metadata setting loads only the metadata, and the none setting doesn’t
load anything.
■■src pecifies the URL of the video.S
■■width Indicates the width in pixels of the rendered <video> element.Quick check
■■You want an image to be displayed when the video is not running. Which prop-
erty should you set to the URL of an image to be displayed?Quick check answer
■■Set the poster property to the URL of an image.Accessing tracks
The W3C has developed a new standard, called WebVTT (Web Video Text Tracks), that
provides the ability to display captions on the video; all browsers implementing the <track>
element will support it. The WebVTT file format is simple and easily readable by browsers and
developers. It’s based on a popular subtitling format called SubRip Text (SRT). If you already
have your content in SRT format, converters are available on the web to convert to the
WebVTT format.
A less-used standard called Timed Text Markup Language (TTML) is an XML-based format
that is more verbose than WebVTT. TTML is outside the scope of this book.