Das Audio Element

HTML5 schafft es endlich einen Standard für das Abspielen von Audio-Dateien zu definieren. In früheren Versionen von HTML gab es keine klaren Vorkehrungen dafür. Man musste sich mit Plug-Ins behelfen und konnte sich nie sicher sein, ob das gewünschte Ergebnis auch so herüberkommt, wie geplant. Benutzer konnten Plug-Ins blockieren und in den verschiedenen Browsern konnte ein Plug-In auf sehr verschiedene Art und Weisen funktionieren. Beispielsweise ist ein unterschiedliches Verhalten der Autoplay-Eigenschaft (automatisches Abspielen) durchaus ein Genickbruch für eine Webseite.

Mit dem <audio></audio> Element ändert sich dieses Fehlverhalten, denn nun können Audio-Dateien ohne Plug-In abgespielt und die Browserunterstützung wesentlich besser überprüft werden:

  • Html
  • Ergebnis
<audio src="https://www.coding-lab.de/res/tutorials/web/html5/jazz.mp3" controls ></audio>

Das obige Beispiel definiert einen Audioplayer, der die Datei des src="" Attributs abspielen kann. Das leere controls Attribute ist eines der wichtigsten, denn es aktiviert die Darstellung des Players. Folgende Attribute können wir diesem Element hinzufügen:

AttributWertBeschreibung
srcurlPfad zur Audiodatei
preloadnone
metadata
auto
none: Lädt die Audiodatei nicht vor.

metadata: Lädt nur die Metadaten der Audiodatei vor.

auto: Lädt die Audiodatei bevor sie abgespielt wird.
controlsboolFügt Controller hinzu (Play-Button, Leiser/Lauter, etc.). Wird benötigt, damit der Player überhaupt sichtbar wird. Wird das Attribut nicht gesetzt, muss das Abspielen mit Javascript geregelt werden.
autoplayboolSpielt die Datei automatisch ab.
loopboolNach dem Ende, fängt die Datei von Neuem an.

Audio Source

Zeitgleich müssen wir uns mit dem leeren <source /> Element bekannt machen. Dieses wird nicht nur für das <audio></audio> Element benutzt, sondern kommt auch beim <video></video> Element zu tragen und definiert mehrere Media-Ressourcen.

  • Html
  • Ergebnis
<audio controls> <source src="https://www.coding-lab.de/res/tutorials/web/html5/jazz.mp3" type="audio/mpeg" /> <source src="https://www.coding-lab.de/res/tutorials/web/html5/jazz.wav" type="audio/wav" /> <source src="https://www.coding-lab.de/res/tutorials/web/html5/jazz.ogg" type="audio/ogg" /> </audio>

Im obigen Beispiel haben wir eine Audiodatei in allen drei von HTML5 unterstützten Audiotypen angegeben. Der Vorteil dabei ist, dass der Browser in jedem Fall die Audiodatei abspielen kann, da er einen der folgenden Dateiformate unterstützen muss:

BrowserMP3WAVOGG
ChromeXXX
FirefoxXXX
OperaXXX
SafariXX
Internet ExplorerX

Angegeben werden die Dateiformate mit dem type="" Attribut und haben folgende Werte:

DateiformatAudiotyp
MP3audio/mpeg
WAVaudio/wav
OGGaudio/ogg

Das Video Element

Mit dem <video></video> Element können wir nun Videos als natives HTML5 Element einbinden. Die Benutzung ähnelt dabei dem des <audio></audio> Elements:

  • Html
  • Ergebnis
<video src="https://www.coding-lab.de/res/tutorials/web/html5/big-buck-bunny.mp4" controls ></video>

Mit dem src="" Attribut geben wir den Pfad zur Videodatei an und das controls Attribut gibt dem Element ein Aussehen; fügt also Controller (Play-Button, Leiser/Lauter, etc.) hinzu. Weiterhin können wir diesem Element folgende Attribute mitgeben:

AttributWertBeschreibung
srcurlPfad zur Videodatei
preloadnone
metadata
auto
none: Lädt die Videodatei nicht vor.

metadata: Lädt nur die Metadaten der Videodatei vor.

auto: Lädt die Videodatei bevor sie abgespielt wird.
widthpxBreite des Video-Players
heightpxHöhe des Video-Players
posterurlDefiniert ein Standbild vor dem Abspielen.
controlsboolFügt Controller hinzu (Play-Button, Leiser/Lauter, etc.). Wird benötigt, damit der Player überhaupt sichtbar wird. Wird das Attribut nicht gesetzt, muss das Abspielen mit Javascript geregelt werden.
autoplayboolSpielt die Datei automatisch ab.
loopboolNach dem Ende, fängt die Datei von Neuem an.

Video Source

Ebenfalls haben wir die Möglichkeit für das <video></video> Element das leere <source /> Element zu benutzen.

  • Html
  • Ergebnis
<video controls> <source src="https://www.coding-lab.de/res/tutorials/web/html5/big-buck-bunny.mp4" type="video/mp4" /> <source src="https://www.coding-lab.de/res/tutorials/web/html5/big-buck-bunny.webm" type="video/webm" /> <source src="https://www.coding-lab.de/res/tutorials/web/html5/big-buck-bunny.ogg" type="video/ogg" /> </video>

Damit haben wir die Möglichkeit mehrere Videoformate anzugeben, von denen sich der Browser das erste herausnimmt, welches er kennt. Eines der folgenden Videoformate muss jeder Browser unterstützen können:

BrowserMP4WEBMOGG
ChromeXXX
FirefoxXXX
OperaX (ab Opera 25)XX
SafariX
Internet ExplorerX

Die Werte für das type="" Attribut des <source /> Elements sind in der folgenden Tabelle angegeben:

DateiformatAudiotyp
MP4video/mp4
WebMvideo/webm
OGGvideo/ogg