HTML and CSS Reference
In-Depth Information
Später im Code können Sie also statt $('#video')[0] einfach nur video schreiben. Das
spart nicht nur zehn Buchstaben, sondern verbessert auch noch die JavaScript-Per-
formance.
Für die Interaktion müssen Sie der Play-Schaltfläche ein Ereignis definieren und ihm
eine Funktion zuweisen, die ausgeführt wird, wenn das Ereignis eintritt:
4
$('#play').on('click', function(){
if(video.paused) {
video.play();
} else {
video.pause();
}
});
Sie weisen dem Button ein click -Ereignis zu. Moment, click ? Das geht doch nur mit
einer Maus? Richtig, aber Touch-Geräte führen einen Klick auch dann aus, wenn der
Finger den Bildschirm berührt, für einige Millisekunden liegenbleibt und dann wie-
der angehoben wird. Das hat zwei Vorteile: Gegenüber touchstart kann der Nutzer
das Video nicht aus Versehen starten, wenn er mit dem Finger über den Bildschirm
wischt. Außerdem ist der Button so mit Desktopbrowsern kompatibel, die Touch-
Events nicht interpretieren können.
Abbildung 4.34 Vergrößertes Video
In der Funktion passiert nun Folgendes: JavaScript prüft zunächst, ob das Video
gerade läuft oder pausiert ist. Ist die Eigenschaft video.paused erfüllt, wird die
.play() -Funktion aufgerufen. Ist die Eigenschaft nicht erfüllt, also spielt das Video
gerade ab, wird die .pause() -Funktion aufgerufen.
Search WWH ::




Custom Search