Videos in HTML5 einbinden

Bis HTML4 ist Hypertext an sich nicht Multimedia-fähig. Der Internet-Browser benötigt also Unterstützung, damit er Videodateien abspielen kann. Dazu werden normalerweise Plug-ins wie etwa QuickTime oder Flash verwendet. Diese ermöglichen es dem Browser, fremde Dateiformate auf der Webseite anzuzeigen, auch wenn der Browser diese nicht direkt unterstützt. Voraussetzung hierfür ist jedoch, dass der Anwender das entsprechende Plugin auf seinem Computer installiert hat.

In HTML5 können Sie Videodateien einbinden, ohne dazu Plug-Ins einzusetzen. Sie verwenden dazu das video-Element. Innerhalb dieses Elements setzen Sie einen oder mehrere Verweise auf die Videodatei oder mehrere alternative, in unterschiedlichen Dateiformaten gespeicherte Versionen der Videodatei.

Hier ein Beispiel:

< h1>Mein Video< /h1>
< video src="meinvideo.mp4" width="640" height="480"
controls preload poster=" standbild.jpg">
< source src=" meinvideo.ogv" type="video/ogg">< /source>
< /video>

Innerhalb des Attributs src des video-Elements wird die URL der abzuspielenden Videodatei notiert. Die Attribute width und heigth definieren die Breite und Höhe der Videoanzeige in Pixeln.

Das Attribut preload bestimmt, dass der Browser direkt beim Laden mit dem Download der Videodatei beginnt. Das Attribut controls zeigt einen Video-Player auf der Webseite an. Mit diesem kann die Videodatei abgespielt, pausiert und angehalten sowie ihre Lautstärke verändert werden. Das Attribut poster verweist auf ein Standbild. Dieses wird angezeigt, falls das Video nicht abgespielt werden kann.

Im source-Element können Sie den Namen einer alternativ abzuspielenden Videodatei angeben, falls der Browser das Dateiformat des direkt im video-Element angegebenen Clips nicht interpretieren kann. Hier könnten auch mehrere source-Elemente untereinander stehen.

Außerdem gibt es noch die folgenden beiden Attribute für das video-Element:

autoplay: Der Inhalt wird abgespielt, sobald genug davon geladen ist.
loop: Wenn Sie dieses Attribut setzen, wird die Video-Datei in einer Endlosschleife abgespielt.

Das Element source verfügt über zwei Attribute:

type gibt gegebenenfalls den MimeType der Video-Datei an, etwa video/mpeg, video/quicktime usw. Sie können das type-Attribut auch mit der Angabe der genauen Codecs versehen, falls Sie diese kennen, beispielsweise type="video/ogg; codecs=theora, vorbis".

Das Attribut media gibt an, für welche Medientypen die Video-Datei geeignet ist. Die Voreinstellung lautet media="all".

Die direkt im video-Element angegebene Videodatei sollte ein Format haben, das der Browser auf jeden Fall erkennt. Weil im Moment noch nicht klar ist, ob das OGG- oder das MP4-Format browserübergreifend die Vorherrschaft erhalten wird, können Sie das Video auch so einbinden, dass beide Alternativen gleichwertig nebeneinanderstehen:

< h1>Mein Video< /h1>
< video width="640" height="480" controls preload poster="standbild.jpg">
< source src=" meinvideo.ogv" type="video/ogg"></source>
< source src=" meinvideo.mp4" type="video/mp4"></source>
< /video></strong>