94 Chapter 4—Video and Audio
The mute() function uses the read/write attribute video.muted to switch to mute
or loud, depending on the initial setting. To give the user optical feedback, the
button label is displayed in the CSS color silver when the tone is muted and in
black when the volume is switched on:var mute = function(ctrl) {
if (video.muted) {
video.muted = false;
ctrl.style.color = 'black';
}
else {
video.muted = true;
ctrl.style.color = 'silver';
}
};Setting the volume is not complicated, either. In addition to the slider as input
type range, we also need to control the label in a span. The basic HTML structure
then looks like this:<input type="range"
min=0.0 max=1.0 step=0.1 value=1.0
onchange="adjustVolume(this)"/>
<span id="currentVolume"> </span>We define a reference to the span element in initControls(), as before, and use
video.volume to initialize the volume with 100 %:curVol = document.getElementById("currentVolume");
curVol.innerHTML = "100 %";
video.volume = 1;The callback function adjustVolume() reacts if the slider is changed. The slider
reflects with min=0 and max=1 the exact value range of video.volume and changes
the volume via step=0.1 in 10% steps if the slider is dragged:var adjustVolume = function(ctrl) {
video.volume = ctrl.value;
curVol.innerHTML = (Math.round(ctrl.value*100))+'%';
};Our video player is now complete. This practical example has given you the
chance to explore about half of the attributes and methods of the HTMLMediaEle-
ment interface. A few interesting attributes and methods are still missing; we will
look at those next.