AV mit HTML 5

Allgemeine Infos

Mit HTML5 lassen sich Audio - und Videoinformationen direkt im Browserfenster abspielen - es müssen keine externen Abspielgeräte (Player) geladen werden.

Über die Elemente audio und video lassen sich mehrere Varianten eines Videos bzw. einer Audio-Datei einbinden.

Das mag auf den ersten Blick verschwenderisch und aufwändig wirken. Der Grund hierfür liegt auf der Hand: Videos landen heute auf einer Vielzahl von Geräten: Desktop, Tablets, Notebooks, auf unterschiedlichen mobilen Endgeräte sowie natürlich auch auf TV-Geräten.

Hierbei stehen Internetverbindungen mit unterschiedlichen Geschwindigkeiten zur Verfügung. Hinzu kommt, dass die Browser z.T. unterschiedliche Audio-Formate und Video-Formate unterstützen.

Die am häufigsten verwendeten Audioformate: WAV, OGG und MP3 werden nicht von allen Browsers - insbesondere von älteren Versionen - unterstützt. Daher wird im HTML5-ADUIO-ELEMENT die Audiodatei in unterschiedlichen Formaten angeboten, so dass alle Browser die Datei abspielen können.

Der Browser erkennt über den MIME-TYPE (Dateityp), welche Datei er abspielen muss.

Beispiel Audio einbinden

Mit Controls

Quellcode

<audio width="300" controls>
  <source src="media/bassloop.ogg" type="audio/ogg">
  <source src="media/bassloop.mp3" type="audio/mpeg">
  <source src="media/bassloop.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>