Video und Audio - HTML5 - page 105

var mute = function(ctrl) {
if (video.muted) {
video.muted = false;
ctrl.style.color = 'black';
}
else {
video.muted = true;
ctrl.style.color = 'silver';
}
};
Das Setzen der Lautstärke ist auch nicht komplizierter. Neben dem Slider als
Input-Typ range muss nun allerdings auch die Beschriftung in einem span kont-
rolliert werden. Das HTML-Grundgerüst ergibt sich demnach folgendermaßen:
<input type="range"
min=0.0 max=1.0 step=0.1 value=1.0
onchange="adjustVolume(this)"/>
<span id="currentVolume"> </span>
Eine Referenz zum span -Element definieren wir wieder in initControls() ,
und bei dieser Gelegenheit initialisieren wir auch gleich über video.volume die
Lautstärke mit 100 %:
curVol = document.getElementById("currentVolume");
curVol.innerHTML = "Lautstärke: 100 %";
video.volume = 1;
Die Callback-Funktion adjustVolume() reagiert schließlich auf Veränderungen
des Sliders, der mit min=0 und max=1 genau den Wertebereich von video.volume
widerspiegelt und über step=0.1 die Lautstärke beim Ziehen des Sliders in
10 %-Schritten verändert.
var adjustVolume = function(ctrl) {
video.volume = ctrl.value;
curVol.innerHTML = 'Lautstärke: '+
(Math.round(ctrl.value*100))+'%';
};
Damit ist unser Video-Player komplett, und wir haben knapp die Hälfte der
Attribute und Methoden des HTMLMediaElement -Interfaces anhand eines prakti-
schen Beispiels erkundet. Einige interessante Attribute und Methoden fehlen
noch - um sie werden wir uns jetzt noch kümmern.