Einfügen audiovisueller Medien


Das Einfügen von audiovisuellen Medien auf einer Webseite in der Art, dass die Datei nicht als Download angeboten wird, sondern direkt im Browser abgespielt wird ist schwierig. Das Problem besteht darin, dass sich die Hersteller der Browser nicht auf einheitliche Formate einigen konnten. Zum Abspielen der eingebetteten Objekte sind Browser-Plug-Ins notwendig. Ist das notwendige Plug-In nicht installiert, so wird das Medium nicht abgespielt. Dies macht es erforderlich, dass die abzuspielenden Medien in mehreren Formaten angeboten werden müssen. Auch dann hilft nur ein Testen mit möglichst vielen verschiedenen Browserversionen, ob das Medium letztendlich abgespielt wird.

Damit der Browser überhaupt Elemente von HTML5 darstellt, muss unbedingt der Doctype in der ersten Zeile des HTML-Dokuments angegeben werden: <!doctype html>. Beherrscht ein Browser mehrere Audio-/Videoformate, entscheidet die angegebene Reihenfolge darüber welche Audio-/Videodatei abgespielt wird.

Einfügen von Audiodateien

HTML 5 erlaubt das Einbetten eines Audio-Tags. Dies könnte z.B. so aussehen:

Quelltext Anzeigebeispiel
<audio controls autostart="false">
<source src="dateien/Maid_with_the_Flaxen_Hair.mp3" type="audio/mpeg" />
<source src="dateien/Maid_with_the_Flaxen_Hair.ogg" type="audio/ogg" />
Der Browser kann kein HTML5-Audio!
</audio>

Der Parameter "controls" gibt an, dass der Player Bedienschalter haben soll. Weitere mögliche Optionen sind "autoplay", "loop" und "preload". Die "source" Tags zeigen auf die Audio Files. Hier sind wie bereits oben beschrieben mehrere notwendig, da jeder Browser seine eigenen Vorstellungen von den zu unterstützenden Codecs hat.

Betrachten Sie die Seite mit unterschiedlichen Browsern so werden Sie feststellen, dass die Darstellung des Players sich voneinander erheblich unterscheidet. Im schlimmsten Fall funktioniert das Abspielen überhaupt nicht.

Zum Konvertieren von Audiofiles bietet sich ein Audiokonverter an. Als Beispiel soll hier der Free Audio Konverter dienen.

Einfügen von Videodateien

Noch schwieriger gestaltet sich das Einfügen von Videodateien. Auch hier gibt es wieder viele verschiedene Videoformate, die von den Browserherstellern mehr oder weniger gut oder aber gar nicht unterstützt werden. Deshalb müssen auch hier wieder verschiedene Formate eines Videos eingebunden werden. Zum Konvertieren von Videofiles bietet sich ein Videokonverter wie z.B. der MiroVideoConverter an.

Moderne Browser mit HTML5-Untersützung erlauben das Einfügen eines Video-Tags. Dies könnte z.B. so aussehen:

Quelltext Anzeigebeispiel
<video width="480" height="276" poster="dateien/wildlife.jpg" controls>
<source src="dateien/wildlife.webm" type="video/webm" />
<source src="dateien/wildlife.mp4" type="video/mp4" />
<source src="dateien/wildlife.ogv" type="video/ogg" />
<object width="480" height="276" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf"/>
<param name="flashvars" value="autostart=true&controlbar=over&image=dateien/wildlife.jpg&file=dateien/wildlife.mp4"/>
<img src="dateien/wildlife.jpg" width="480" height="276" title="Der Browser kann kein HTML5-Video!"/>
</object>
</video>

Hier habe ich dem Video eine Anzeigegröße ("width" und "height"), ein Vorschaubild ("poster") und wieder die Bedienelemente ("controls") vorgeschrieben. Dann werden wieder per "source" die Dateien angegeben.

Für den Fall, dass der Browser kein HTML-Video abspielen kann, bieten sich als Fallback folgende zwei Lösungen an:


zuletzt geändert am:
Eine Seite von Mirko Hans