Embedding Media
autoplay: A Boolean attribute that, when present, instructs the browser to automatically begin
playing the audio 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 audio reaches the end, looping forever until you tell it
to stop.
muted: A Boolean attribute that, when present, indicates that the audio 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 most useful on secure websites. For more on CORS,
see w3.org/TR/cors.
video
The video element embeds a digital video in a web page, and is very similar to the audio element, with
many of the same optional attributes. As with audio, the video element can include the URL of the video
file or stream in a src attribute, assuming there’s only a single source:
<video src="video/feature.mp4" controls></video>
As with audio, the controls attribute invokes the browser’s native control bar, which tends to look the
same as each browser’s audio controls (Figure 5-10 is taken from Chrome). The video element also has a
similar set of JavaScript methods, so you can build your own custom control bar if the browser’s native
controls don’t suit you.
Figure 5-10. An embedded video showing Chrome’s built-in controls
