HTML and CSS Reference
In-Depth Information
Property
Purpose
Represents whether the
media
element is paused or not.
paused
The effective playback rate, assuming there is no media controller overriding it.
playbackRate
A
TimeRanges
object that reflects the time ranges the user agent has rendered.
played
Reflects the contents of the
preload
attribute.
preload
Represents the current ready state of the element.
readyState
A
TimeRanges
object reflecting ranges in the media element the user agent is able
to seek to.
seekable
Set to true if user agent is currently seeking a new position in media; false other-
wise.
seeking
Reflects the
src
attribute of the media element.
src
A
Date
object representing the current timeline offset.
startOffsetTime
A fixed array of
TextTrack
objects representing text tracks of media resource.
textTracks
A live
ExclusiveTracklist
object representing the video tracks available in the
media resource.
videoTracks
The playback volume, in a range of 0.0 (silent) to 1.0 (loudest).
volume
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>
<head>
