Information Technology Reference
In-Depth Information
führt über die Methode
String.fromCharCode()
. Ihr werden komma-getrennt
die gewünschten UTF-16-Hexadezimal-Codes als Strings übergeben. Die Be-
schriftung des Pausenknopfs besteht übrigens aus zwei
BLACK VERTICAL REC-
TANGLE
-Zeichen (
▮
).
Die ID
playButton
werden wir später noch brauchen.
4.7.3
Das Anzeigen und Setzen der Wiedergabeposition
Um die aktuelle Wiedergabeposition anzeigen zu lassen, bedienen wir uns des
bereits aus dem Kapitel 3, Intelligente Formulare, bekannten neuen Input-Typs
range
.
<input type="range"
min=0 max=1 step=1 value=0
onchange="updateProgress(this)"
id="currentPosition">
Die Attribute
min
und
max
geben den erlaubten Wertebereich vor, und
step
be-
stimmt jenes Intervall, um das sich beim Ziehen des Sliders der Wert
value
ver-
ändern soll. Auf unser Video umgemünzt, steht
min
für den Anfang und
max
für
das Ende des Films, womit klar ist, dass wir den Wert
max
auf die Gesamtlänge
des Videos in Sekunden bringen müssen. Der richtige Ort dafür ist
initCont-
rols()
, das richtige Attribut ist
video.duration
. Fügen wir also folgende Zeilen
unserer
initControls()
-Funktion hinzu:
curPos = document.getElementById("currentPosition");
curPos.max = video.duration;
Damit hält
max
jetzt den Wert von
596.468017578125
, womit das Video knapp
zehn Minuten dauert. Das direkte Setzen der Abspielposition erfolgt beim Zie-
hen oder Anklicken des Sliders im
onchange
-Event-Handler-Callback
update-
Progress()
:
var updateProgress = function(ctrl) {
video.currentTime = ctrl.value;
};
Eine einzige Anweisung genügt dabei, denn das Attribut
video.currentTime
spiegelt nicht nur die aktuelle Abspielposition wider, sondern kann auch direkt
gesetzt werden. Den passenden Wert dafür holen wir uns aus dem
value
-Attri-
but des Sliders. Um die Anzeige der aktuellen Abspielposition im Format
MM:SS
zu implementieren, sind noch folgende Schritte nötig:
