HTML Grundlagen: Videos einfügen mit <video>

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 Plugins oder JavaScript Code ist bei der Lösung mit HTML5 nicht mehr notwendig. Alle aktuellen Web-Browser einschließlich der mobilen Versionen unterstützen das VIDEO Tag sehr gut. Deshalb gibt es keine Kompatibilitätsprobleme bei der Wiedergabe von Videos.

HTML <video> TagMit dem HTML VIDEO Tag lassen sich Videos oder Filme innerhalb einer HTML-Seite abspielen.

Früher unterstützten die Browser jeweils unterschiedliche Video-Formate. Mit dem HTML5 <video> Element gibt es eine Standard-Methode zum Einbinden eines Videos in eine Webseite. Leider haben die Browser-Hersteller bisher keinen gemeinsamen Standard gefunden, welche Video-Codecs eingesetzt werden sollen/dürfen/müssen.

Für das Video-Format haben sich zwei verschiedene Formate herauskristallisiert. Einerseits OGV (Ogg Theora) und andererseits MP4 (H.264).

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 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.

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>
Ausgabe des HTML Codes

Durch das Attribut controls wird ein Kontrollfeld eingeblendet, damit der Nutzer die Bedienelemente »Play«, »Pause«, »Stop« und »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 unterstützt werden oder nicht.

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