Video und Audio - HTML5 - page 110

Im network state begegnen uns loadstart , progress , suspend , abort , error , emp-
tied und stalled , deren Namen schon andeuten, in welchen Netzwerk-Sze-
narien sie auftreten. Beim ready state finden sich loadedmetadata , loadeddata ,
waiting , playing , canplay oder canplaythrough , die sich alle direkt auf die Ver-
fügbarkeit von Daten für die aktuelle oder zukünftige Abspielpositionen bezie-
hen. Im playback state sind es schließlich play , pause , timeupdate , ended , rate-
change sowie durationchange , deren Namen wohl ebenso selbsterklärend sind
wie das letzte noch ausstehende Event, volumechange .

Wann und wie welches Event eingesetzt wird, das bestimmt einzig und allein
das Ziel, das man mit seinem Script verfolgt. Bei unserem Video-Player genüg-
ten mit oncanplay und ontimeupdate gerade einmal zwei; würden wir aber an
den Details feilen, bräuchten wir mit Sicherheit noch viele andere.

Wenn Sie Details zu den einzelnen Events nachlesen wollen, werden Sie bei
der übersichtlichen Event summary in der Spezifikation fündig. Sie finden dort
nicht nur eine Beschreibung für jedes Event, sondern auch Hinweise dazu, zu
welchem Zeitpunkt es tatsächlich ausgelöst wird:

http://www.w3.org/TR/html5/video.html#mediaevents

MediaEvents live in Aktion zeigt schließlich Philippe Le Hégarets HTML5 Video,
Media Events and Media Properties -Testseite beim W3C:

http://www.w3.org/2010/05/video/mediaevents.html

4.8 Und was ist mit Audio?

Viel Neues gibt es zum Thema Audio in HTML5 nicht zu berichten, denn elegan-
terweise teilen sich <video> und <audio> das HTMLMediaElement -Interface, womit
alles, was bisher zum Thema Scripting und Video gesagt wurde, auch für audio -
Elemente Gültigkeit besitzt. Aus verständlichen Gründen fallen die zusätzlichen
video -Attribute für Breite, Höhe oder Poster-Frame des HTMLVideoElement -Inter-
faces weg. Dafür können audio -Elemente bequem über einen Konstruktor er-
zeugt und dabei auch gleich mit einem src -Attribut belegt werden:
var audio = new Audio(src);

In Anlehnung an unseren Video-Player werden wir im Folgenden einen Audio-
Player für den Soundtrack von Big Buck Bunny programmieren. Slider, Zeit-
anzeige sowie das Starten und Stoppen funktionieren dabei genauso wie beim
Video-Beispiel. Neu hingegen ist das Menü zur Wahl der Tracks, da jetzt ver-