Video und Audio - HTML5 - page 101

1. Hinzufügen eines span -Elements im Anschluss an den Slider:
<span id="timePlayed"> </span>
2. Speichern einer Referenz auf den span in der initControls() -Funktion und
das Initialisieren dieser Variablen curTime mit dem Wert 0:00 :
curTime = document.getElementById("timePlayed");
curTime.innerHTML = '0:00';
3. Updaten des Zeitstempels curTime bei jedem Aufruf von updateProgress() :
mm = Math.floor(video.currentTime / 60.0);
ss = parseInt(video.currentTime) % 60;
ss = (ss < 10) ? '0'+ss : ss;
curTime.innerHTML = mm+':'+ss;
Damit sind wir fast fertig. Nur eine wesentliche Funktionalität des Sliders fehlt
noch: Er muss beim Abspielen des Videos synchron mit der Abspielzeit bleiben. Die
Lösung dafür liegt im HTML-Code zum Einbau des Videos und heißt ontimeupdate .
Die Spezifikation legt nämlich fest, dass beim Abspielen eines Mediastreams im
Abstand von mindestens 15 bis maximal 250 Millisekunden ein timeupdate -Event
auszulösen ist. Welche Callback-Funktion dabei aufgerufen wird, bestimmt das
Event-Handler-Attribut ontimeupdate . Setzen wir es auf updateProgress() , ist der
perfekte Zeitgeber zum Synchronisieren unseres Sliders gefunden.
Der einzige Unterschied zum händischen Setzen der Position beim Klicken
oder Ziehen des Sliders ist, dass wir jetzt nicht die Abspielposition verändern
dürfen, sondern im Gegenzug den Slider und die Zeitanzeige auf video.cur-
rentTime bringen müssen. Die leicht veränderte updateProgress() -Funktion er-
gibt sich demnach folgendermaßen:
var updateProgress = function(ctrl) {
if (ctrl) {
video.currentTime = ctrl.value;
}
else {
curPos.value = video.currentTime;
}
// Setzen der Zeit im Format MM:SS
mm = Math.floor(video.currentTime / 60.0);
ss = parseInt(video.currentTime) % 60;
ss = (ss < 10) ? '0'+ss : ss;
curTime.innerHTML = mm+':'+ss;
};
Listing 4.1: Verändern und Aktualisieren der Abspielposition