Wie kann ich mit HTML5 ein Video einbinden?

Veröffentlicht: 03. Mrz 2011

Das Problem

Wie kann ich mit HTML5 ein Video einbinden?

Die Lösung

In HTML5 kann man mit dem Video Element ein Video in einer Webseite einbinden, ohne das ein Plugin wie Silverlight oder Flash dafür benötigt wird.

Das Video Element in seiner einfachsten Form beinhaltet die Url zum einzubindenden Video:

<video src="video.mp4" />            

Um das Video direkt nach dem Laden der Webseite zu automatisch starten zu lassen, kann das autoplay Attribut eingefügt werden. Mit dem Attribut controls können Controls eingeblendet werden (Play/Pause-Button, Scrubberbar), und mit den Attributen width und height kann man dem Video eine feste Breite und Höhe geben. Wenn die Breite und Höhe nicht angegeben werden, wird das Video in seiner originalen Größe auf der Webseite abgespielt.

Die Attribute controls und autoplay kann man in SGML Schreibweise angeben, sie benötigen keinen Wert. Falls man valides XML schreiben möchte, kann man diesen auch einfach Werte zuweisen, bspw. controls="true".

<video src="video.mp4" width="600" height="480" controls autoplay />             

Um die Unterstützung in verschiedenen Browsern zu gewährleisten, können mehrere, in unterschiedlichen Codecs encodierte Quellen für das Video angegeben werden. Hierbei kann der Browser anhand des type Attributs ermitteln, ob er den vorliegenden Codec unterstützt.

Falls der Browser das video Element nicht unterstützt, kann man innerhalb des Elements einen Fallback Content angeben, der bei älteren Browsern ohne Videounterstützung angezeigt wird.

<video controls="true" autoplay="true" width="640" height="360">
<source src="video/video.mp4" type="video/mp4" />
<source src="video/video.ogv" type="video/ogg" />
<div>Dieser Browser unterstützt das Video Element nicht.</div>
</video>