HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 168

Video mit JavaScript steuern
Das interessanteste Feature von HTML5-Videos ist, dass sie wie andere DOM-Objekte
mit JavaScript verändert und gesteuert werden können. In einem kleinen Beispiel
wollen Sie daher auf die eingebauten Bedienelemente verzichten und lediglich einen
Play-Pause-Button einfügen. Eine zusätzliche Zoomschaltfläche soll das Video auf
150 % vergrößern. Legen Sie zunächst im HTML-Code ein video -Element an:
<video src="video.mp4" id="video"></video>
Per src -Attribut übergeben Sie dem Video die Quelldatei, mit der id video sprechen
Sie das video -Objekt im JavaScript-Code an. Außerdem benötigen Sie zwei HTML-
Schaltflächen: eine zum Abspielen bzw. Anhalten des Videos und eine für die Zoom-
funktion (Abbildung 4.33):
<div>
<button id="play">Play/Pause</button>
<button id="zoom">Vergrößerung 150%</button>
</div>
Abbildung 4.33 HTML-Buttons unter dem Video
Als Nächstes geht es daran, die Schaltflächen zum Leben zu erwecken. Verwenden Sie
dafür die in Abschnitt 2.5.2, »Einführung in jQuery«, besprochene Bibliothek jQuery.
Diese binden Sie in den HTML-Code ein:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Jetzt speichern Sie in einer JavaScript-Variablen das video -Objekt ab. Sie identifizie-
ren es über die zuvor festgelegte id namens video :
var video = $('#video')[0];