Information Technology Reference
In-Depth Information
ment. Damit haben wir Zugriff auf das
HTMLMediaElement
-Interface und können
mit der Implementierung unseres ersten Features beginnen - dem Abspielen
und Stoppen.
4.7.2
Das Starten und Stoppen des Videos
Zum Starten und Stoppen benötigen wir zuerst einmal einen Button im HTML-
Dokument, der auf Benutzer-Klicks reagieren kann:
<input type=button
value="▶"
onclick="playPause(this);">
id="playButton"
Hinter
▶
verbirgt sich eine Zeichenreferenz zum Unicode-Symbol
BLACK
RIGHT-POINTING TRIANGLE
, das wir bequem für den Abspielknopf verwenden
können. Die Funktionalität des Startens und Stoppens selbst steht in
playPau-
se()
, einer Callback-Funktion, die bei jedem Klick aufgerufen wird und im Ar-
gument
this
das
button
-Objekt gleich mit übergeben bekommt:
var playPause = function(ctrl) {
if (video.paused) {
video.play();
ctrl.value = String.fromCharCode('0x25AE','0x25AE');
}
else {
video.pause();
ctrl.value = String.fromCharCode('0x25B6');
}
};
Ob der Film gerade läuft oder nicht, sagt uns das Attribut
video.paused
. Es
liefert
true
, wenn der Film angehalten ist, und
false
, wenn er abgespielt wird.
Das Starten und Stoppen ist damit leicht -
video.start()
und
video.pause()
lauten die passenden Methoden, die ihrerseits
video.paused
auf
false
bezie-
hungsweise
true
setzen.
Das im Argument
ctrl
übergebene
button
-Objekt wird dazu benutzt, je nach
Status über
ctrl.value
die Schaltfläche in einen Pause- oder Abspielknopf
zu verwandeln. Direktes Zuweisen von
▶
hätte nicht das gewünschte
Ergebnis, sondern würde die Zeichenkette
▶
wörtlich als Beschriftung
anzeigen. Der richtige Weg, um Unicode-Zeichen in JavaScript zu erzeugen,