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 nicht ganz einfach. 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 möglicherweise 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 Audioformate, entscheidet die angegebene Reihenfolge darüber welche Audiodatei 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" />
</audio>

Der Parameter "controls" gibt an, dass der Player Bedienschalter haben soll. Ein weitere mögliche Option ist "autostart". Der "source" Tag zeigt auf das Audio File. Hier sind wie bereits oben beschrieben eventuell mehrere Dateiformate 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

Ähnlich 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. Zum Konvertieren von Videofiles bietet sich ein Videokonverter wie z.B. der Any-Video-Converter an.

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

Quelltext Anzeigebeispiel
<video controls>
<source src="dateien/wildlife.mp4" type="video/mp4" />
</video>

Hier habe ich dem Videoplayer wieder das Anzeigen der Bedienelemente ("controls") vorgeschrieben. Per "source" wird die Datei angegeben.


zuletzt geändert am:
Eine Seite von Mirko Hans