Zum Inhalt springen

HTML5: <audio> und <video> Tags

  • von
Heute geht es um die beiden Multimedia-Tags <audio> und <video> . Diese wurden erst in HTML5 hinzugefügt. Allgemeine Syntax am Beispiel des Audiotags: <audio src=“Musikdatei.mp3″ controls> <p>Text, welcher angezeigt wird, wenn Ihr Browser kein HTML5 verarbeiten kann.</p> </audio> oder <audio controls> <source src=“Datei1.mp3″ type=“audio/mpeg“></source> <source src=“Datei.ogg“ type=”audio/ogg”></source> <p>Text, welcher angezeigt wird, wenn Ihr Browser kein HTML5 verarbeiten kann.</p> </audio>
Bei beiden können zusätzlich noch folgende Attribute angegeben werden:
  • autoplay: Die Datei startet so früh wie möglich
  • loop: Die Datei startet immer wieder von vorne, sobald sie das ende erreicht hat
  • muted: gibt an, dass der Ton aus ist
  • preload: gibt an, wie und wann die Datei geladen werden soll. Mögliche Werte sind:
    • auto: so schnell wie möglich
    • metadata: läd nur die Metadaten
    • none: läd erst, wenn auf Play gedrückt wird
Zusätzlich kann bei dem <video> Tag noch angegeben werden:
  • height: Höhe in Pixeln
  • poster: Bild, welches angezeigt wird, wenn das video nicht abgespielt wird
  • width: Breite in Pixeln
Es ist wichtig, dass immer das Attribut controls angegeben ist, weil ansonsten der Playbutton und die Lautstärkeregelung nicht angezeigt werden. Außerdem müssen bei der zweiten Schreibweise die MIME’s (Multipurpose Internet Mail Extensions, es wird angegeben, um welchen Dateitypen es sich handelt) angegeben werden. Eine Liste der offiziellen MIME’s gibt es auf http://www.iana.org/assignments/media-types/media-types.xhtml . Wann nehme ich die erste und wann die zweite Schreibweise? Die erste Schreibweise ist nur möglich, wenn man die Datei nur in einem Format einbinden möchte. Bei der zweiten Schreibweise werden mehrere Dateien hochgeladen. Normalerweise ist der Inhalt der Datei gleich, nur es ist in einem anderen Format. Dann wählt der Browser anhand der von ihm unterstützten Formate selbstständig aus, welche Datei er abspielt. Welche Vor- und Nachteile haben die beiden Tags? Der übliche Nachteil bei den beiden Tags ist, dass nicht jeder Browser HTML5 unterstützt, also die Dateien nicht abspielen kann. Also muss man, wenn man auch noch alte Browser unterstützen möchte trotzdem auf <embed> und <object> zurückgreifen. Der Hauptvorteil der <audio> und <video> Tags ist, dass man jetzt mehrere Versionen der Datei einbinden kann, wie bereits bei der letzten Frage erklärt.