Chapter 5
autoplay: A Boolean attribute that, when present, instructs the browser to automatically begin
playing the video when the page loads.
mediagroup: Can associate multiple media elements (both audio and video) with a single
media controller object, allowing multiple sources to be synchronized. For example, a video could
be synchronized with a separate audio commentary track. The attribute’s value is any name you
wish to give to the media group, and all media elements in the group should share the same
name in their own mediagroup attributes.
loop: A Boolean attribute that, when present, instructs the browser to automatically repeat
playback from the beginning each time the video reaches the end, looping forever until it’s
commanded to stop.
muted: A Boolean attribute that, when present, indicates that the video’s audio track defaults to a
muted state when it loads.
crossorigin: Cross-Origin Resource Sharing (CORS) settings, specifying that the video file or
stream may or may not be served from other domains. This attribute can only have the values
anonymous (the default) or use-credentials. The attribute with an empty value is equivalent to
anonymous. The crossorigin attribute is mostly useful on secure websites. For more on CORS,
see w3.org/TR/cors.
source
The source element specifies the address of an embedded media resource. This is a void element that
can’t hold any content and has no end tag, though you can close it with a trailing slash (/>) if you prefer
XHTML syntax. The source element requires a src attribute to provide the media’s URL, which may be a
file or a stream. This element can only occur as a child of a media element, either audio or video, and
should come before any other flow content or track elements. You’ve seen several examples of source
elements already, but here’s one more:
<audio controls>
<source src="audio/thwip.ogg" type="audio/ogg">
<source src="audio/thwip.mp3" type="audio/mpeg">
</audio>
It’s technically optional, but you should include a type attribute specifying the media’s content type
(content types were introduced in Chapter 3). This allows a browser to quickly determine if the media is in
a format it can play, and if not, it shouldn’t bother to download any resources. Without the type attribute,
user-agents have to download at least part of the media and analyze it before they can tell if it’s something
they can play or not. Including a detailed type attribute can save on bandwidth and processing.
In addition to the content type, you can also include the specific codec the media uses. Remember that a
browser must use the same codec to decode the encoded media, so informing the browser which codecs
are in use is a good thing to do:
<audio controls>
<source src="audio/thwip.ogg" type="audio/ogg;codec=vorbis">
<source src="audio/thwip.mp3" type="audio/mpeg;codec=mpga">
