Videos in HTML5 einbinden mit <video>

Der HTML5 Befehl <video> benötigt auf jeden Fall noch die Angabe zum Video. Diese Angabe wird zwischen dem Anfangs-Tag und dem End-TAG eingebettet in Form von

<video>
<source src="video.ogg" type="video/ogg">
</video>

Für das Format des Videos haben sich 2 verschiedene Formate herauskristallisiert. Einerseits das Format Ogg Theora (OGG) und auf der anderen Seite MP4 (h.264).

Warum 2 verschiedene Formate? Das liegt an Patenten und rechtlichen Einschränkungen, die mit dem Format H.264 (MP4) zusammenhängen – dagegen punktet das Ogg Theora (OGG) Format als Open Source. In dem HTML-Befehl <video> können beide Dateien eingebunden werden:

<video>
<source src="video.ogg" type="video/ogg">
<source src="video.mp4" type="video/mp4">
</video>

Damit die Sache nicht zu einfach wird, die verschiedene Browser unterstützen je nach Hersteller nur das eine oder andere Format (genau aus diesen lizenzrechtlichen Gründen).

BrowserOgg Theora (.ogg)h.264 (.mp4)
FirefoxJa
Internetexplorer
OperaJa
ChromeJaJa
Safari Ja
iPhone Ja
Android Ja

Stand: Februar 2010

Was bedeutet das für den Einsatz von Videos auf Webseiten. Will man so viele Browser wie möglich unterstützen, muss das Video in beiden Formaten vorgehalten werden. Das hat den Nachteil, dass man annähernd doppelte so viel Speicherplatz benötigt und 2 Videodateien erstellen bzw. pflegen muss. Weiterhin hat man auch als Privatperson ein rechtliches Thema – auch wenn der Zeitpunkt für Lizenzkosten erst dieses Jahr auf das Jahr 2015 verschoben wurde, auch dieses Jahr kommt einmal.

Daher werden hier im Folgenden nur mit dem Format .ogg gearbeitet – die Beispieldatei mit der Maus können Sie herunterladen und im Firefox damit den <video>-TAG testen. Firefox ist zum Webseiten entwickeln eh die bessere Variante.

Die Integration des Abspielens im Browser hat den riesigen Vorteil, dass keinerlei Plug-ins installiert werden müssen, es schneller i.d.R. lädt und man keine Bedenken haben muss, dass ein Plug-in den Browser „crashed“.

Attribute des HTML-TAGs <video>

Dem HTML-TAG <video> können die Attribute width, height, src, poster, autobuffer, autoplay und controls mitgegeben werden.

Im folgenden Beispiel sieht man den Einsatz

<video src="video.ogg" width="320" height="240" 
poster="video-standbild.jpg" autobuffer autoplay 
controls>

<div>Schade – hier käme ein Video, wenn Ihr 
Browser HTML5 Unterstützung hätte, wie z.B. der 
aktuelle Firefox</div>

</video>

Bedeutung der einzelnen Attribute:

width – die angezeigt Breite der Videos

height – die angezeigt Höhe des Videos

poster – ein Bild, das angezeigt wird, wenn das Video noch nicht gestartet wurde. Das Attribut poster wird von nicht allen Browsern unterstützt.

autoplay – das Video wird sofort gestartet, wenn ein Besucher die HTML-Seite aufruft

controls – es werden für die Steuerung Steuerelemente (controls) angezeigt, dass das Video gestoppt, gestartet und an eine andere Stelle gesprungen werden kann.

autobuffer - Zwischenspeicherung aktivieren, damit Video möglichst ruckelfrei wiedergegeben werden kann.

Zum Testen können Sie folgende Beispielvideo herunterladen (diese Video ist kostenlos und frei nutzbar, wenn es im diesem Zustand belassen wird): http://www.html-seminar.de/video/maus-maus-aus-3.ogg (rechts Maustaste daraufklicken und speichern unter)

<video src="video/maus-maus-aus-3.ogg" width="512" height="288" 
poster="video/titelbild-maus.jpg" controls>

<div> Schade – hier käme ein Video, wenn Ihr Browser HTML5 
Unterstützung für OGG hätte, wie z.B. der aktuelle Firefox</div>

</video>

Auch wenn man sich hier Kritik sehr schnell einfängt. Ich werde aus Gründen der Lizenzrechte hier nur das „Ogg Theora“ verwenden, auch wenn nur zurzeit Firefox und Opera dies unterstützen.

Und nun das Ergebnis:

Hier kommt ein Video mit dem neuen HTML-5-TAG:

Videos richtig eingebunden aber werden nicht abgespielt - Server einstellen!

Sollte alles richtig in HTML eingebettet sein und die Videos auf dem Server hochgeladen sein, aber es trotzdem noch nicht funktionieren, dann fehlt dem Server noch die Angabe der MIME-Typen.

Dazu wird beim Apache-Server das .htaccess ergänzt bzw. falls kein .htaccess vorhanden angelegt. Bei der Datei aber extrem vorsichtig sein. Mit der Datei kann man ziemlich viel zerschießen!

Für die verschiedenen Video-Formate stehen in der .htaccess-Datei folgende Einträge:

AddType video/mp4 .mp4 
AddType video/x-m4v .m4v
AddType video/webm .webm 
AddType audio/webm .weba
AddType video/ogg .ogm 
AddType video/ogg .ogv 
AddType video/ogg .ogg

Konvertieren von Videos

Ihre Kamera oder Ihr Handy spuckt Videos aus, aber leider im falschen Format. Dann einfach in das gewünschte Format konvertieren.

Ein sehr vielseitiges Konvertierungsprogramm gibt es unter http://www.xmedia-recode.de/ mit dem schönen Namen „XMedia Recode“ als freie Software. Diese nutzt ffmpeg - wer also gerne Batch-Dateien schreibt, kann auch ffmpeg nutzen.