HTML Grundlagen: VIDEO – Videos einfach in Webseiten einbinden

Video Player in Webseiten einbinden

Mit dem neuen Video Tag von HTML5 lassen sich Videos ganz einfach in HTML einbinden. Die Wiedergabe von Videos ist mittlerweile so gut, dass es nicht mehr notwendig ist, ein Plug-In zu verwenden.

Alle aktuellen Web-Browser einschließlich der mobilen Browser-Versionen unterstützen den VIDEO-Befehl ausgezeichnet. Beim Abspielen von Videos treten heutzutage keine Probleme mit der Kompatibilität auf. Das bedeutet, dass die Video-Wiedergabe jetzt ohne Störung oder Unterbrechung verläuft.

Mit dem neuen VIDEO-Tag von HTML5 lassen sich Videos oder Filme innerhalb von HTML-Seiten 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.

Das HTML <video> Tag

Zwei verschiedene Video-Formate haben sich durchgesetzt. Dabei handelt es sich einerseits um OGV (Ogg Theora) und andererseits um MP4 (H.264).

Aus lizenz-rechtlichen Gründen gibt es unterschiedliche Video-Formate, die abhängig vom Browser unterstützt werden. Die Browser unterstützen entweder nur das eine oder nur das andere Videoformat.

Das Video-Format MP4 wird von allen aktuellen Browsern unterstützt. Das Video-Format Ogg muss man nur angeben werden, wenn auch ältere Browser unterstützt werden sollen.

WebM ist ein Open-Source-Format, das 2010 von Google als lizenzfreie Alternative zu den proprietären Video-Standards MPEG4 und H.264 entwickelt wurde. Das WebM Video-Format wurde vor allem für Multimedia-Inhalte im Web optimiert und kann in einigen Fällen eine kleinere Dateigröße als MPEG4 erreichen, da eine effizientere Komprimierung verwendet wird. Die Qualität der erzeugten Videos ist trotzdem sehr gut.

MP4 – MIME-type video/mp4
WebM – MIME-type video/webm
OGG – MIME-type video/ogg

Für die grundlegende Funktion des Video-Players von HTML5 ist es ausreichend, wenn im <video>-Tag nur die URL des Videos angegeben wird.

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-Player mit dem <video> Tag in eine Webseite integrieren

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

Mit dem Attribut controls wird ein Kontrollfeld eingeblendet, damit Nutzer die Steuerelemente Play, Pause und Volume (Lautstärke) verwenden können. Das controls-Attribut sollte man immer angeben.

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

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, wenn der Play Button geklickt wurde.

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.