Der HTML5 Video Tag ermöglicht es relativ einfach Videos in die eigene Webseite einzubinden, logischerweise ohne dieses Flash-Zeug von Adobe. Das wiederum bedeutet das sich diese Videos auch auf mobilen Endgeräten ohne Probleme abspielen lassen, also iPhone, iPad, iPod und auch Android Tablets und Smartphones. Nachteil an der ganzen Sache: Es funktioniert nur mit modernen Browser und es gibt kein Video Format das von allen Browsern unterstütz wird, dass heißt wenn ihr Videos wirklich in allen Browsern zur Verfügung stellen wollt müssen mindestens zwei der drei gängigen Video-Formate eingebunden werden.
Generell wird der HTML5 Video Tag von folgenden Desktop-Browsern unterstützt:
Internet Explorer ab Version 9
Mozilla Firefox ab Version 3.5
Google Chrome ab Version 3
Apple Safari ab Version 3.1
Opera ab Version 10.50
Konqueror ab Version 4.4
Ebenso funktioniert das ganze ohne Probleme in den mobilen iOS, Android und Firefox Browsern.
Ein weitere wichtiger Punkt der zu beachten ist, ist die Tatsache, dass in jedem Browser ein nativer Player verwendet wird. Das heißt in jedem Browser sehen die Bedienelemente anders aus.
Wie bereits erwähnt gibt es drei wichtige Video-Standards für den HTML5 Video-Tag, von denen allerdings nicht jedes Format von jedem Browser unterstützt wird: Ogg (Theora), MPEG4 (H.264), WebM (VP8).
Hier eine kurze Liste welche Browser welches Format unterstützen:
Format
IE
Firefox
Opera
Chrome
Safari
Ogg
Nein
ab 3.5+
ab 10.5+
ab 5.0+
Nein
MPEG 4
ab 9.0+
Nein
Nein
ab 5.0+
ab 3.0+
WebM
Nein
ab 4.0+
ab 10.6+
ab 6.0+
Nein
Ihr seht also, dass es nicht möglich ist mit nur einem Video-Format alle Browser zu unterstützen, für einen umfangreichen Browser support sind mindestens zwei Formate nötig. Eine noch detailliertere Liste gibt es auf Wikipedia:
Glücklicherweise ist es möglich in den HTML5 Video Tag mehrere Video-Formate einzubinden um so eine Kompatibilität zu allen Browsern herzustellen, als erstes möchte ich euch jedoch die einfache Variante mit nur einem Video-Format zeigen:
Das ist die einfachste Variante des Video-Tags ohne Fallback und mit eingeblendeten Player-Kontrollelementen. Es ist allerdings durchaus sinnvoll noch die Breite und Höhe, ein Vorschaubild und einen Alternativtext mit einzugeben.
Ein entsprechendes Beispiel würde dann so aussehen:
Das hier ist ein Alternativ-Text, wenn der Video-Tag vom Browser nicht unterstütz wird.video-datei.webm
Hier nun ein Beispiel mit mehreren Video-Formaten in einem HTML5 Video Tag um alle Browser zu supporten:
Das hier ist ein Alternativ-Text, wenn der Video-Tag vom Browser nicht unterstütz wird.video-datei.webm
Dabei wird das src Attribut des Video Tags entfernt und innerhalb, des Video Tags entsprechende Source Einträge hinzugefügt. Dabei wird das erste Video von oben, dass kompatibel ist abgespielt.
Der HTML5 Video Tag hat allerdings noch ein paar Attribute mehr, als nur die gerade in den Beispielen gezeigten.
Folgende Attribute sind innerhalb des <video *> Tags möglich:
Attribut
Wert
Beschreibung
audio
muted
Wenn gesetzt, ist der Ton lautlos
autoplay
autoplay
Wenn gesetzt, startet das Video automatisch bei Seitenaufruf
controls
controls
Wenn gesetzt, werden die Bedienelemente eingeblendet
height
Höhe
Höhe des Videos in px oder %
loop
loop
Wenn gesetzt, wird das Video immer wiederholt
poster
Pfad
Pfad zum Vorschaubild
preload
preload
Wenn gesetzt wird das Video bei Seitenaufruf vorgeladen
src
Pfad
Pfad zur Video-Datei
width
Breite
Weite des Videos z.B. in px oder %
Mit diesen Beschreibungen solltet ihr den Video Tag ohne Probleme verwenden können.
