Java Reference
In-Depth Information
target.innerHTML = "Pause";
}
If it's Play, you want to play the video. You do so by using the
HTMLMediaElement
object's
play()
method, and you change the button's text to read Pause.
If the result of this
if
statement is
false
, you can assume that you want to pause the video:
else {
video.pause();
target.innerHTML = "Play";
}
}
So, in the
else
statement, you use the media object's
pause()
method and change the button's text
back to Play.
Of course, this function won't execute itself, so you register a
click
event listener on the
<button/>
object:
document.getElementById("playbackController")
.addEventListener("click", playbackClick);
This example works, but it's not an ideal solution for controlling media. Specifically, you shouldn't rely
upon the text of an element to determine if you should play or pause. You can better control media by
incorporating some of the many properties defined by the HTML5 specification.
properties
Although the HTML5 specification defines just a few methods for media objects, it defines
a lot
of
properties. You won't find a complete list of properties in this section, but Appendix C lists all of
them.
Most of the
HTMLMediaElement
's properties are for querying and/or modifying the state of the
media; others, like
controls
and
poster
(the latter for video) are cosmetic.
The following table lists a few of the properties and their descriptions.
propertY name
desCription
Gets or sets the
autoplay
HTML attribute, indicating whether playback
should automatically begin as soon as enough media is available
autoplay
Reflects the
controls
HTML attribute
controls
Gets the current playback time. Setting this property seeks the media to the
new time.
currentTime
Gets the length of the media in seconds; zero if no media is available. Returns
NaN
if the duration cannot be determined
duration
continues
