Video und Audio - HTML5 - page 96

4.7 Video und Scripting - ein einfacher

Video-Player

Videos kann man nicht nur im Browser anzeigen, sondern über das Interface
HTMLMediaElement auch direkt mit JavaScript steuern. Wie das geht, zeigen wir
in diesem Abschnitt, in dem wir einen einfachen JavaScript-HTML5-Video-
Player mit folgenden Features implementieren:

Starten und Stoppen des Videos

»

Anzeigen und Setzen der Wiedergabeposition auf einer Zeitleiste

»

Schnellsuchlauf vor und zurück

»

Auswählen bestimmter Sequenzen im Film

»

Laut, leise und stumm schalten

»

Das passende Video für unseren Video-Player ist schnell gefunden: Big Buck
Bunny - ein etwa zehn Minuten langer, computeranimierter Trickfilm der, wie
seine Adresse http://bigbuckbunny.org/ vermuten lässt, das Resultat eines
freien Filmprojekts ist. Initiiert von der Blender Foundation , kreierten sieben
3D-Animationsspezialisten im Zeitraum von Oktober 2007 bis April 2008 unter
Verwendung freier Software wie eben Blender , Gimp , Inkscape oder Python auf
Ubuntu diesen Film und stellten ihn unter einer offenen Lizenz ins Netz. Die
Handlung folgt dem Motto funny and furry ( lustig und pelzig ) und kann unter
http://de.wikipedia.org/wiki/Big_Buck_Bunny in der Wikipedia nachgelesen wer-
den. Wir wollen uns ja mehr um den Player kümmern, also tun wir das auch
- Abbildung 4.9 zeigt. wie er aussehen wird.

HINWEIS

Die HTML-Seite des Video-Players mit JavaScript-Bibliothek und CSS-Stilen
finden Sie auf der Internetseite zum Buch unter folgenden Links:

http://html5.komplett.cc/code/chap_video/js_videoPlayer.html

»

» http://html5.komplett.cc/code/chap_video/js_videoPlayer.js

http://html5.komplett.cc/code/chap_video/js_videoPlayer.css

»