HTML and CSS Reference
In-Depth Information
Media-Specific Attributes
In addition to the global attributes, there are also several media-specific attributes that are
shared by both the
audio
and
video
elements. We've seen the
src
and
controls
attributes
used in previous examples. The rest are provided in the following list:
preload
The
preload
attribute provides hints to the user agent about preloading the media content.
By hints, I mean that hopefully the user agent follows the directive, but may or may not.
The acceptable values are
none
, which hints to hold on preloading the media until the user
presses the play button (or otherwise wants the video to load);
metadata
, which hints to
load the media's metadata only; or
auto
, the default state, which hints to the user agent to
go ahead and download the resource.
autoplay
The
autoplay
attribute is a boolean attribute whose presence signals the user agent to be-
gin playing the media file as soon as it has loaded enough of the media file so that it can
play through it without stopping. If
autoplay
is added to a media element, it overrides the
preload
setting, regardless of setting.
loop
The
loop
attribute resets the media file back to the beginning when finished, and continues
the play.
muted
If the
muted
attribute is present, the media plays, but without sound. The user can turn on
the sound via the media controls, if they wish.
mediagroup
The
mediagroup
attribute provides a way to group more than one media file together.
At the time this was written, the new
mediagroup
attribute had not been implemented by any
browser. According to the specifications, if the attribute is provided for two or more media
elements, they'll all be managed by the same implicitly created mediacontroller. We can as-
sume from the documentation that if one of the media files is played, the others are kept in
sync. This behavior could be very helpful in situations such as having a video of a speech in
one element, and a sign language interpretation of the speech in another element, or for emu-
lating picture-in-picture with two videos.
