HTML and CSS Reference
In-Depth Information
Controlling audio and video with JavaScript
Earlier in this chapter, you saw that, by default,
<audio>
and
<video>
ele-
ments don't provide controls for the user to interact with them; it's up
to the web author to explicitly ask for controls to be provided. At the
time, you'd be forgiven for thinking that this is a bit pointless—what
good is a video if you can't play it? In this section, you'll discover
exactly how useful it can be to have complete control over the video
from JavaScript.
To begin with, let's look at playing and pausing a video. This is straight-
forward—the
<video>
element provides
play()
and
pause()
methods:
<button
onclick="document.getElementById('myvideo')
.play();">
Play
</button>
<button
onclick="document.getElementById('myvideo')
.pause();">
Stop
</button>
Instead of providing controls on the video, buttons are provided on the
page. If your first thought when you saw the default controls was,
“Ugh! I don't like the look of those. How can I style them myself?”
then here is the answer: create your own elements to control the video,
and style them however you wish.
You don't have to limit yourself to the standard operations of Play and
Pause. This function starts the video play from a point in the middle of
the stream; you pass in the point as a parameter:
function playFrom(secs) {
var v = document
.getElementById('myvideo');
v.currentTime = secs;
v.play();
}
