Video und Audio - HTML5 - page 104

4.7.5 Das Auswählen bestimmter Sequenzen im Film

Die Grundlage für das Auswählen einzelner Sequenzen ist natürlich zuerst ein-
mal eine Liste mit Zeitstempeln und Titeln. Ein aufgeklapptes Pulldown-Menü
bildet die Basis:
<select name="scenes" onchange="selectScene(this)" size=19>
<option value="0:00" selected>0:00 Vorspann</option>
<option value="0:23">0:23 Intro Sequenz</option>
<!-- 17 weitere Einträge -->
</select>

Der Rest ist einfach und wird vom Callback selectScene() erledigt. Ihm über-
geben wir den selektierten Eintrag als Argument. Dann wandeln wir seinen
Zeitstempel in Sekunden um und setzen video.currentTime auf den ermittelten
Wert. Die Methode _play() leistet uns auch hier gute Dienste und startet das
Video an der gewünschten Position neu.
var selectScene = function(ctrl) {
arr = ctrl.value.split(":");
video.currentTime = parseFloat((arr[0]*60)+(arr[1]*1));
updateProgress();
_play();
};

4.7.6 Laut, leise und stumm schalten

Bleibt zum Schluss noch die Steuerung der Lautstärke. Beginnen wir mit einer
einfachen Übung - ein / aus . Im HTML-Code benötigen wir dafür wieder einen
Button, dessen Beschriftung wie zu erwarten aus einem Unicode-Zeichen,
diesmal BEAMED EIGHTH NOTES ( &#x266B; ), gebildet wird.

<input type="button"
value="&#x266B;"
onclick="mute(this)">

Die Funktion mute() nutzt das read/write -Attribut video.muted , um je nach
Ausgangslage stumm oder laut zu schalten. Als optisches Feedback für den
Benutzer wird bei ausgeschaltetem Ton die Beschriftung des Knopfes in der
CSS-Farbe silver angezeigt und beim Wiedereinschalten auf Schwarz zurück-
gestellt.