Java Reference
In-Depth Information
}
function volumechangeHandler(e) {
muteButton.innerHTML = video.muted ? "Unmute" : "Mute";
}
function playbackClick(e) {
video.paused ? video.play() : video.pause();
}
function muteClick(e) {
video.muted = !video.muted;
}
var video = document.getElementById("bbbVideo");
var playButton = document.getElementById("playbackController");
var muteButton = document.getElementById("muteController");
video.addEventListener("pause", pauseHandler);
video.addEventListener("playing", playingHandler);
video.addEventListener("volumechange", volumechangeHandler);
playButton.addEventListener("click", playbackClick);
muteButton.addEventListener("click", muteClick);
</script>
</body>
</html>
Save this as
ch15 _ example3.html
and open it in your browser. It will look exactly like Example 2.
Each time you play, pause, mute, or unmute the video, be sure to open the media's context menu. Both
the custom UI and the control options in the context menu will be in sync, as shown in Figure 15-7.
figure 15-7
