HTML5 Video Tag

Eine wunderschöne Verbesserung beschert uns HTML5 auch durch die Einführung des Video Tags. Vorbei sind die Zeiten, als man Videos sicher und browserübergreifend nur mit Flash abspielen konnte.
Diese Zeit sind insbesondere seit dem enormen Erfolg von Apples iPhone und iPad vorbei, weil auf diesen Geräten überhaupt keine Flash Inhalte angezeigt werden. Daher ist es umso wichtiger, Videos jetzt über das neue HTML5 Element einzubinden, um damit die Verfügbarkeit des Videos auf einer größtmöglichen Zahl von Endgeräte/Browserkombinationen zu gewährleisten.
In diesem Tutorial wird erklärt, wie das Video Tag eingebunden werden kann, welche Formate untersützt werden und wie es mit der Browserkompatibilität aussieht.

Die Syntax des HTML5 Video Elements

Um künftig ein Video auf einer HTML5 Website abzuspielen, müssen Sie lediglich, als das Video Element mit diesem Code einbinden und das Video in den zwei angegebenen Formaten am entsprechenen Ort zu hinterlegen:

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
Ihr Browser unterstützt das Video tag nicht
</video>

Die Angabe von Höhe und Breite bewirkt, dass der Browser sofort den notwendigen Platz auf der Website reserviert und nicht erst nach dem Laden des Videos das Element entsprechend erweitert. Der Text, der zwischen den Video Tags angegeben ist, wird nur dann angezeigt, wenn der Browser das Video Element nicht verarbeiten kann.

Controls des Video Tags

Wenn das Attribut „Controls“ vorhanden ist, bewirkt dies, dass im Browser Buttons angezeigt werden, mit denen der User das Video selbständig starten, stoppen und pausieren kann.

Um mit alten Standards konform zu sein, sollte es in der Form „controls=“controls“ eingebunden werden.

Source: HTML5 Video Formate

Bei den Video Formaten haben sich zwei Standards herauskristallisiert. Zum einen der MP4 Standard mit dem Videokompressionsverfahren H.264. Dieses wird von praktisch allen Browsern außer Firefox unterstützt, da Mozilla auf Open Source steht. Firefox verwendet daher das entsprechende Open Source Format .ogg O mit Theora video codec. Daher sollten Videos in beiden Formaten vorliegen und als source angegeben werden. Der Browser verwendet die erste für ihn verständliche source.

Weitere Attribute für das Video Tag

Weitere Attribute, die über die Notation attribut=“attribut“ eingebunden werden können, sofern nicht anders vermerkt:

  • autoplay: Das Video startet von selbst automatisch nachdem es geladen wurde (selten empfehlenswert)
  • loop: Das Video startet erneut, wenn das Ende erreicht ist
  • muted: Das Video wird stumm, also ohne Audio ausgegeben
  • preload (auto|metadata|none): Das Video wird standardmäßig vorgeladen, wenn die Seite geöffnet wird. Sofern das nicht gewünscht wird, kann das über preload=’none‘ unterbunden werden
  • poster: Gibt man einen Pfad auf eine Bilddatei mittels poster an, wird dieses Bild angezeigt, während das Video lädt

Browserkompatibilität des Video Tags

Alle aktuellen Browser inklusive  Internet Explorer ab der Version 9 können das Video Tag interpretieren.

Dieser Beitrag wurde unter HTML5 abgelegt und mit , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

3 Antworten auf HTML5 Video Tag

  1. Manuel Pastrzig sagt:

    Rechtschreibfehler im Absatz „Source: HTML5 Video Formate“. In der ersten Zeile steht „Viedo“.

  2. joocom sagt:

    Ich habe noch einen kleinen Artikel dazu geschrieben wie man die Höhe und Breite eines Videotags dynamisch ermitteln und setzen kann. Vielleicht hilft es ja dem ein oder anderem :)

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *