HTML and CSS Reference
In-Depth Information
Represents whether the media element is paused or not.
The effective playback rate, assuming there is no media controller overriding it.
A TimeRanges object that reflects the time ranges the user agent has rendered.
Reflects the contents of the preload attribute.
Represents the current ready state of the element.
A TimeRanges object reflecting ranges in the media element the user agent is able
to seek to.
Set to true if user agent is currently seeking a new position in media; false other-
Reflects the src attribute of the media element.
A Date object representing the current timeline offset.
A fixed array of TextTrack objects representing text tracks of media resource.
A live ExclusiveTracklist object representing the video tracks available in the
media resource.
The playback volume, in a range of 0.0 (silent) to 1.0 (loudest).
To add a custom control to a media element, you'll need to add HTML that will take the place
of the controls. In the example, I want to provide three options to the user: the ability to play,
pause, or completely stop the video. I'm using the button elements for all three options, as it
is the semantically proper element for the actions.
Both the stop and pause buttons are disabled, by default, since the page loads with the video
not playing. In addition, I've added an id attribute to the video element.
The newly adjusted HTML5 page content is shown in Example 15 . Note that the video ele-
ment still has the controls attribute. If the user has turned off JavaScript, we still want them
to be able to play the video.
Example15.Adjusted HTML5 page, preparing to add a custom media control
<!DOCTYPE html>
Search WWH ::

Custom Search