HTML5 Serie: Videos einbinden mit dem video-Tag

Im ersten Teil der HTML5 Serie habe ich euch gezeigt, wie ihr den YouTube Flash-Player durch einen HTML5 Video-Player ersetzen könnt. In diesem Teil der Serie geht es um die Umsetzung eines Video-Players in HTML5.

Seit HTML5 ist der <video>-Tag verfügbar. Es ist unschwer zu erkennen, dass er dazu dient Videos abzuspielen. Das faszinierende dabei ist, dass die Videos direkt im Quelltext eingebunden sind, sodass kein Flash-Player notwendig ist. Dadurch ergeben sich natürlich auch neue Möglichkeiten im Zusammenspiel mit CSS und JavaScript.

Videos einbinden

Die einfache Variante

Folgendes Code-Beispiel zeigt, wie ihr am Einfachsten ein Video einbindet:

1
2
3

<video width="480" height="360" src="test.ogv" autoplay>
    Dieser Browser unterstützt kein HTML5.
</video>

Wie man sieht, verhält sich der <video>-Tag fast genauso wie der <img>-Tag. Breite, Höhe und Quelle können übergeben werden. Außerdem sorgt autoplay dafür, dass das Video direkt abgespielt wird. Alles was zwischen dem öffnenden und dem schließenden Tag steht, wird bei den Browsern angezeigt, die kein HTML5 unterstützen.

Der Nachteil

Der Nachteil an der einfachen Variante ist, dass bestimmte Browser nur bestimmte Codecs unterstützen. Die im Beispiel verwendete .ogv-Datei würde nur im Firefox und im Chrome abgespielt werden, da nur diese Browser den Codec unterstützen.

Die unterstützten Codecs

Folgende Liste zeigt die unterstützten Codecs der Browser:

Mozilla Firefox:

Video-Codec: Theora
Audio-Codec: Vorbis
Container: Ogg (.ogv)

Apple Safari:
(ab iPhone OS 3 auch der mobilen Version)

Video-Codec: H.264
Audio-Codec: AAC
Container: MP4 (.mp4)

Google Chrome:

unterstützt alle oben genannten Codecs

Internet Explorer:

noch keine Information vorhanden

Die bessere Variante

Wie man sehen kann, brauchen wir eine allgemeine Variante, die jeden Browser abdeckt. Dazu geben wir ganz einfach mehrere Video-Quellen an. Jeder Browser kann sich so die Datei aussuchen, die er auch unterstützt.

<video  width="480" height="360" controls>
    <source src="test.ogv" type="video/ogg" />
    <source src="test.mp4" type="video/mp4" />
    
    Dieser Browser unterstützt kein HTML5.
</video>

Statt autoplay wurde in diesem Beispiel controls verwendet. Dadurch fügen wir die typischen Bedienelemente eines Players hinzu. Diese sehen je nach Browser unterschiedlich aus.

Übersicht der Attribute

width, height – Breite und Höhe des Videos
src – Quelle der Video-Datei
autoplay – Video wird automatisch abgespielt
autobuffer – Video wird beim Seitenaufruf runtergeladen
poster – mit poster="poster.png" wird poster.png angezeigt, bevor das Video abgespielt wird