Java Reference
In-Depth Information
Start playing the video and click the Mute button. You'll notice that the audio is now muted and the
button's text reads Unmute. Click the button again to unmute the audio.
Now click the Pause button. You'll notice that the video pauses and the button's text changes to
Resume. Clicking the button again resumes the video.
This example is quite different from Example 1. Starting with the HTML, you added a new
<button/>
element:
<div>
<button id="playbackController">Play</button>
<button id="muteController">Mute</button>
</div>
It has an
id
of
muteController
and the text of Mute. As you already know, it's used for muting and
unmuting the audio. You register the
click
event listener at the bottom of the code:
document.getElementById("muteController")
.addEventListener("click", muteClick);
The function used to handle this event is called
muteClick()
. Its first two lines create the
target
and
video
variables—the former containing a reference to the
<button/>
element object, and the latter
referencing the
HTMLMediaElement
object:
function muteClick(e) {
var target = e.target;
var video = document.getElementById("bbbVideo");
This function toggles the
muted
property of the media object, so you first need to check its current
value with an
if
statement:
if (video.muted) {
video.muted = false;
target.innerHTML = "Mute";
}
If it's
true
, the audio is currently muted. So, you set
video.muted
to
false
and change the text of the
button to Mute, thus unmuting the video.
But if
muted
is
false
, the
else
statement executes, muting the video:
else {
video.muted = true;
target.innerHTML = "Unmute";
}
}
You set the video's
muted
property to
true
to mute it, and then you change the button's text to
Unmute.
