HTML and CSS Reference
ments, the main video, is created with a controls attribute. Clicking the play button on the
video also triggers a play on the other two resources. Clicking on the pause button pauses all
<video poster="some.png" controls mediagroup="altogethernow">
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.ogg" type="video/ogg" />
<video poster="sign.png" mediagroup="altogethernow">
<source src="videofilesign.mp4" type="video/mp4" />
</source src="videofilesign.ogg" type="video/ogg" />
<source src="audiofile.mp3" type="audio/mp3" />
<source src="audiofile.ogg" type="audio/ogg" />
Among other use cases is that of creating a picture-in-picture effect by scaling one video and
overlaying it on the other, and then adding the controls attribute to the larger, primary video.
There are many possible uses for this type of functionality and, just as with a single resource,
group of media resources).
The MediaController object provides an interface for accessing the media controller in script.
It supports two methods:
Sets the paused attribute to false and causes playback to resume on all slaved media re-
Sets the paused attribute to true and causes playback to pause on all slaved media re-
The MediaController methods are similar to the methods for HTMLMediaElement described
in Chapter . The difference lies in the fact that more than one media resource is controlled by
an individual action.
The properties for the MediaController are also very similar to those listed for the HTMLMe-
the property's value isn't dependent on the state of one media resource, but a group of media
resources. In the HTML5 specification, all of the media resources controlled by a media con-
troller are known as slaved media resources.