Adding Video and Audio - HTML5 Foundations - page 232

1. Open the about.html file in your text editor.
2. Create a new <button> element below the volume slider and give it the ID muteBtn .
<button type="button" id="muteBtn">Mute</button>
3. Save the about.html file.
4. Open the video.js file in your text editor.
5. Add a variable for the Mute button called muteBtn .
window.onload = function() {
...
var volumeControl = document.getElementById(“volume");
var muteBtn = document.getElementById(“muteBtn");
...
}
6. Create a new event listener for muteBtn that listens for the click event.
window.onload = function() {
...
// Add an event listener for the mute button.
muteBtn.addEventListener(“click", function(e) {
});
}
7. Inside the function block of this event listener, you use an if/else statement to check whether the video is
currently muted. If it is, you set the muted property to false and update the button text to Mute ; other-
wise, set the muted property to true and the button text to Unmute .
// Add an event listener for the mute button.
muteBtn.addEventListener(“click", function(e) {
// Toggle the muted value.
if (video.muted == true) {
video.muted = false;
muteBtn.textContent = “Mute";
} else {
video.muted = true;
muteBtn.textContent = “Unmute";
}
);
8. Save the video.js file.
Open the About page in your web browser. If you start playing the video and then click the Mute button, the audio is
muted. Click the button again and the audio comes back. Figure 11-8 shows how the Mute button should look in
your browser.