Spielwiese für den Feuerfuchs erstellen

Dieser Artikel erschien in der Augustausgabe 2009 des freien Magazins.

Mit Firefox 3.5 wurden die Schleusen des neuen HTML 5 für die breite Masse der Internetuser geöffnet. Jetzt liegt es an den Webentwicklern, Homepagebetreibern und Bloggern – zu denen wir uns zweifellos zählen – die erweiterten Möglichkeiten auch sinnvoll zu nutzen.

Probleme, die während oder vor der Installation des aktuellen Browsers auftreten können, hat Christoph in seinem FAQ zu Mozillas Shiretoko ausführlich geklärt. Doch um diese Vorteile auch voll nutzen zu können, sollten wir uns als Blogger, Vod- oder Podcaster auch daran halten, die neuen Elemente zu nutzen.

Besonders möchte ich in diesem Bericht darauf eingehen, wie man die neuen audio- und video-Tags gekonnt einsetzt, personalisiert und/ oder (wenn man Lust hat) seinen eigenen Player bastelt.

Soundfiles einbinden

Allgemein

Um Flash- oder Silverlightfreie Player auf der Homepage einzubetten, sollte man den neuen audio-Tag benutzen. Dieser bietet schon im Vornherein eine große Fülle an Möglichkeiten, die Benutzung von Sounds auf der Webseite anzupassen. Zunächst das Grundgerüst:

<audio src="podcast-version.ogg" id="audio" controls="true" autobuffer="true" autoplay="false">
Alternativer Player für nicht-HTML-5-fähige Browser oder alternativer Text
</audio>

Der Befehl src klärt, welche Datei abgespielt werden soll und ist das einzig zwingende Attribut im audio-Tag.

Notfalls kann es aber auch später über JavaScript eingebunden werden. Die id macht diese Audioausgabe später für Skripte ansprechbar; controls steuert die Anzeige der standardmäßigen Kontrollelemente; autobuffer regelt das vorsorgliche Laden der Datei, auch wenn die Datei gar nicht abgespielt wird; autoplay würde im wahren Zustand das vorhergehende Attribut unnütz machen, aber keinen Widerspruch erzeugen.

Weitere nützliche Attribute für audio:

Attribut	Beschreibung
start	beta Gibt die Sekunde an, ab der das Musikstück abgespielt werden soll. Dies bietet sich besonders dann an, wenn man ein bestimmtes Kapitel eines Podcasts, Hörbuchs oder sonstigem Audiomaterial zeigen möchte.
end	beta Ist das Gegenstück zum „start“-Attribut. Auch hier erfolgt die Angabe in Sekunden.
loopstart	beta Definiert den Start einer Schleife.
loopend	beta Definiert das Ende einer Schleife. Sobald dieses erreicht wurde, springt die Wiedergabe zurück zu „loopstart“.
playcount	Die natürliche Zahl, die der Wert für dieses Attribut sein muss, gibt die Anzahl der Wiederholungen des Stückes an.

Welche Events beim Abspielen gibt, werde ich am Ende des Artikels noch erläutern.

Demonstration

Beispiel^[1] für die Anwendung des audio-Tags:

Videos einbinden

Allgemein

Diesen Abschnitt dürfte besonders für Vodcaster interessant werden. Allgemein gesagt: im video-Tag gibt es die gleichen Attribute wie bei audio, nur noch ein paar mehr

Grundgerüst:

<video src="videofile.ogv" id="video" controls="true" autobuffer="true" autoplay="false" width="640" height="480">
Alternativer Player und/ oder Alternativtext
</video>

Eigentlich gibt es hier die gleichen Attribute wie bei audio, auch hier ist nur src zwingend, kann aber auch im Nachhinein über JavaScript eingebunden werden.


Der Sinn von start und end dürfte vor allem dann klar werden, wenn man auf Nachrichtenportalen wie Tagesschau.de einen einzelnen Beitrag aus der aktuellen Nachrichtensendung ansehen möchte (auch wenn das bisher noch nicht auf HTML 5 basiert).

Weitere nützliche Attribute für video:

Attribut	Beschreibung
start	beta Gibt die Sekunde an, ab der das Video abgespielt werden soll. Dies bietet sich besonders dann an, wenn man einen bestimmten Teil eines Videos zeigen möchte.
end	beta Ist das Gegenstück zum „start“-Attribut. Auch hier erfolgt die Angabe in Sekunden.
loopstart	beta Definiert den Start einer Schleife.
loopend	beta Definiert das Ende einer Schleife. Sobald dieses erreicht wurde, springt die Wiedergabe zurück zu „loopstart“.
playcount	Die natürliche Zahl, die den Wert für dieses Attribut sein muss, gibt die Anzahl der Wiederholungen des Stückes an.
poster	beta Leider noch nicht ausgereift soll dieses Attribut die URL einer Bilddatei enthalten, welche angezeigt werden soll, so lange noch kein Video geladen wurde.

Demonstration

Ein Beispiel^[2] für ein HTML 5 Video im ogg-Theora Format.

Frei? Proprietär? Was denn nun?

Source-Tag

Nachdem ja gerade ein Streit zwischen den großen Firmen der Browserbranche geführt wird, welcher Audio- und Videocodec denn nun standardmäßig von allen Browsern unterstützt werden soll, gibt es vor allem einen Verlierer: moderne Webseitenbetreiber. Während Opera und Mozilla stark für das patentfreie Ogg-Format eintreten, beharrt Apple auf proprietären Formaten. Google und Microsoft halten sich dabei mehr oder weniger heraus (Google bindet einfach beide in Chrome ein und Microsoft weiß noch nicht einmal, ob sie diese Tags überhaupt unterstützen wollen). Für die Webseitenbetreiber, die es allen Usern mit modernen HTML 5 fähigen Browsern ermöglichen wollen, dieses auch zu nutzen, gibt es einen Ausweg: Bindet beides ein!

Hierfür gibt es die source-Tags. Diese kann man innerhalb der audio- bzw. video-Klammer setzen und der Browser nimmt dasjenige, das er zuerst unterstützt!

Grundgerüst:

<video>
<source src="video.ogv" type="video/ogg">
<source src="video.mp4">
</video>

Dynamik durch Javascript

Wie ich schon angedeutet habe, kann man über JavaScript Dynamik in die Multimediafiles bringen, oder sich seinen eigenen Player basteln. Dies ist gar nicht so komplex, wie es auf den ersten Blick zu sein scheint. Letztendlich muss man hierfür nur die oben angesprochenen Events kennen und ein paar JavaScriptkenntnisse haben.

Ansprechen kann man das Video oder den Ton über die eindeutige ID, so dass auch mehrere Multimediafiles auf einer Seite korrekt angesprochen werden können. Um beispielsweise Playbutton für zwei Videos zu erstellen, die mit den IDs „video1“ und „video2“ unterschieden werden sollen, genügt letztendlich folgender Code:
<script type="text/javascript">
function play(video) {
var v = document.getElementById(video);
v.play();
}
</script>
<button onclick="play('video1'); return false;">erstes Video starten</button><button onclick="play('video2'); return false;">zweites Video starten</button>

Weitere Funktionen sind z.B. stop(), pause(), muted [true | false], volume [ += | -= | ==] und mit currentTime kann man die derzeitige Position auslesen.
Da das auf Dauer wahrscheinlich nicht ausreicht, sollte man sich mit den neuen Events auseinandersetzen, die mit den Tags entstanden sind. Da die Liste schier endlos erscheint, werde ich nur ein paar – wie ich finde – interessante Events herausgreifen, mit denen man ein aufwendigeres Playpanel basteln kann.

Event	Es tritt ein, wenn…
oncanplay	genügend Frames geladen sind, dass die Datei abgespielt werden kann.
oncanplaythrough	die Datei voraussichtlich komplett durchgespielt werden kann. Dabei wird es auch die Relation Spiel- zu restlicher Ladezeit berücksichtigt.
ondataunavailable	es einen Fehler beim Laden der Datei gibt.
onended	die Datei fertig abgespielt ist.
onerror	ein allgemeiner Fehler auftritt
onpause	das Stück pausiert wurde.
onplay	das Stück gespielt wird
onvolumechange	die Lautstärke verändert wurde.
onwaiting	das Stück gezwungener maßen warten muss (etwa weil es noch unvollständig geladen ist)

Inwiefern man solche JavaScripte schon mit relativ wenig Aufwand schreiben kann, sieht man beispielsweise auf dieser Demoseite.

Ende

Mit dieser kleinen Einführung hoffe ich, dass die Möglichkeiten von HTML 5, nämlich freie Software und freie Dateiformate weiter zu verbreiten, dargestellt werden konnten. Mit Firefox 3.5, dem am weitesten verbreiteten modernen Browser, ergibt sich nun die Möglichkeit für uns, dies auch der breiten Masse zugänglich zu machen. Die uns allen bekannte Enzyklopädie Wikipedia und deren Tochterseiten setzen schon auf video- und audio-Tags. Deren Videos und Töne werden sind schon fertig in freien Dateiformaten formatiert und können abgerufen werden. Wir werden nun auch unsere Multimediadateien überwiegend in diesen Formaten verbreiten.


Da es in naher Zukunft nicht möglich sein wird, ALLE Besucher mit diesen modernen Mitteln anzusprechen, wird mam wohl oder übel nicht darum herumkommen, die Videos noch in anderen Formaten anzubieten. Dazu kann man ja auch gängige Videoseiten verlinken. Probleme die bei den freien Formaten im Browser auftreten können, werden bei Wikicommons versucht zu lösen.

Ich wünsche euch viel Spaß beim herumexperimentieren mit Multimediadateien und beim Spielen mit JavaScript.

Gruß Benni

---

[1] Audiodatei: Brad Sucks – Dropping out of School
[2] Videodatei: Cloud timelapse