HTML Grundlagen: Video-Content Marketing – Mit dem video Tag deine Webseite auf das nächste Level bringen

Video Player in die Webseite einbinden

Mit dem neuen VIDEO-Tag von HTML5 lassen sich Videos ganz einfach in eine HTML Seite einbinden. Mit HTML5 ist es nicht mehr notwendig, ein Plugin zu verwenden oder JavaScript zu benutzen.

Alle aktuellen Web-Browser einschließlich der mobilen Browser-Versionen unterstützen den VIDEO-Befehl ausgezeichnet. Bei der Wiedergabe von Videos treten keine Kompatibilitäts-Probleme auf.

Mit dem neuen VIDEO-Tag von HTML5 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 unterschiedliche Videoformate, die abhängig vom Browser unterstützt werden oder auch nicht? Um die Sache nicht zu einfach zu machen, unterstützen die Browser aus lizenz-rechtlichen Gründen entweder nur das eine oder nur das andere Videoformat.

Für die grundlegende Funktion des Video-Players von HTML5 ist es ausreichend, wenn im <video>-Tag nur die URL des Videos angegeben wird. Zur Zeit werden drei Video-Formate vom <video>-Tag 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.

Mit dem Attribut controls wird ein Kontrollfeld eingeblendet, damit der Nutzer die Bedienelemente Play, Pause und Volume (Lautstärke) nutzen kann. Das Attribut controls sollte man immer angeben.

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 Browser unterstützt werden sollen.

Weitere Attribute für den Video-Player

• Attribute width und height
  Diese beiden Attribute ermöglichen es, die Größe des Videos in Pixel zu definieren. Die Angaben für width (Breite) und height (Höhe) werden ohne Einheit festgelegt.Durch diese beiden Attribute kann man die Größe des Videos in Pixel festlegen. Die Angaben für width (Breite) und height (Höhe) müssen ohne Einheit angegeben werden. In der Regel wird die Größe so gewählt, dass sie der nativen Größe (Originalgröße) des Videos entspricht.

• 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 Webseiten optimal. Für Video-Galerien sollte man die Eigenschaft muted nicht aktivieren.