HTML Grundlagen: video Tag 101 – Tipps und Tricks für die perfekte Integration von Videos auf deiner Website

Video Player in die Webseite einbinden

Mit dem neuen video-Tag von HTML5 lassen sich Videos ganz einfach in eine HTML Seite einbinden. Die Nutzung eines Plug-ins oder JavaScript ist bei der Lösung mit HTML5 nicht mehr notwendig.

Alle aktuellen Web-Browser einschließlich der mobilen Versionen unterstützen den video-Befehl sehr gut. Probleme mit der Kompatibilität bei der Wiedergabe von Videos gibt es nicht.

Mit dem neuen video-Tag lassen sich Videos oder Filme innerhalb einer HTML-Seite abspielen.

Früher unterstützten die Browser jeweils unterschiedliche Video-Formate. Mit dem <video> Element von HTML5 gibt es eine Standard-Methode zum Einbinden eines Videos in die Webseite.

Leider haben die Browser-Hersteller bisher keinen gemeinsamen Standard gefunden, welche Video-Codecs eingesetzt werden sollen bzw. (dürfen oder müssen).

Das HTML <video> Tag

Warum gibt es zwei verschiedene Video-Formate, die je nach Browser unterstützt werden oder nicht unterstützt werden? Damit die Sache nicht zu einfach wird, unterstützen die Browser aus lizenz-rechtlichen Gründen nur das eine oder nur das andere Video-Format.

Für die grundsätzliche Funktion des Video Players von HTML5 reicht es aus, wenn im <video> Tag nur die Video URL angegeben wird. Zur Zeit werden vom <video> Tag drei Video Formate unterstützt.

• mp4 – MIME-type video/mp4

• WebM – MIME-type video/webm

• ogg – MIME-type video/ogg

Der Video-Player wird mit <video> eingeleitet und muss mit </video> abgeschlossen werden.

Füge folgenden Code in den Quellcode deiner Webseite ein, um ein Video einzubinden.

<video controls>
    <source="/video/anime-schmetterling-480p.mp4" type="video/mp4">
    Dein Browser unterstützt dieses Video-Format leider nicht.
</video>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Durch das Attribut controls wird ein Kontrollfeld eingeblendet, damit der Nutzer die Bedienelemente Play, Pause und Volume (Lautstärke) benutzen kann. Das Attribut controls sollte immer angegeben werden.

Das Attribut type ist notwendig, weil es verschiedene Video-Formate gibt, die je nach Browser und Browser-Version aus Lizenzgründen entweder unterstützt werden oder nicht unterstützt werden.

Das Video-Format MP4 wird von allen aktuellen Browsern unterstützt. Die Video-Formate WebM und Ogg müssen nur angegeben werden, wenn auch ältere Web-Browser unterstützt werden sollen.

Weitere Attribute für den Video-Player

• Attribute width und height
  Durch diese beiden Attribute kann man die Größe des Videos in Pixel festlegen. Die Angaben für width (Deutsch: Breite) und height (Deutsch: Höhe) muss man ohne Einheit angeben. Normalerweise sollte die Größe der nativen Größe des Videos entsprechen.

• Attribut preload
  Mit diesem Attribut wird festgelegt, wie das Video geladen werden soll. Folgende Werte sind möglich: auto, metadata, none.

  Mit preload="auto" entscheidet der Browser automatisch, was im Voraus geladen wird.

  Mit preload="metadata" werden nur die Metadaten ohne die eigentlichen Video-Daten (z.B. Name und Dauer) im Voraus geladen.

  Mit preload="none" werden keine Daten im Voraus vorgeladen. Das Laden der Video-Datei beginnt erst mit einem Klick auf den Button Play.

  Das Video sollte nicht automatisch geladen geladen werden, sondern erst durch Klick auf den Play-Button.

• Attribut autobuffer
  Die Eigenschaft autobuffer ist normalerweise nicht aktiviert. Deshalb wird das Video erst durch Klick auf den Play-Button heruntergeladen. Durch autobuffer wird das automatische Buffering aktiviert. Dadurch wird das Video beim Aufruf der Webseite sofort vollständig geladen. Das ist in der Regel aber nicht erwünscht.

• Attribut autoplay
  Die Wiedergabe des Videos wird sofort nach dem Laden der Webseite gestartet. Das kann für den Besucher der Website sehr störend sein.

• Attribut loop
  Hiermit wird das Video in einer Endlosschleife abgespielt. In der Regel ist das für den Besucher der Website sehr unangenehm und wird meist als störend empfunden.

• Attribut volume (Lautstärke)
  Mit volume="Startwert" kann man die Lautstärke auf einen beliebigen Wert zwischen 0.0 und 1.0 einstellen. Als Standard-Lautstärke sollte man einen Startwert 0.25 (d.h. 25 Prozent) wählen.

• Attribut muted (Audio ist stumm geschaltet)
  Hiermit wird die Audio-Ausgabe stumm geschaltet. Der Benutzer muss die Lautstärke anschließend mit dem Lautstärkeregler individuell einstellen, um den Ton zu hören.

  Diese Einstellung ist für die meisten Websites optimal. Für Video-Galerien sollte man die Eigenschaft muted aber nicht aktivieren.