Videos in HTML 5 einbinden mit <video>

Der HTML 5 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 Patente und rechtliche 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/videos/maus-maus-aus-3.ogg (rechts Maustaste daraufklicken und speichern unter) 

<video src="videos/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 HTML 5 
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:

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.erightsoft.com/Superdc.html mit dem schönen Namen „Super ©“ von eRightSoft als freie Multimedia Software.

vorheriges Kapitel: HTML 5
nächstes Kapitel: Geld verdienen im Internet
HTML 5SeitenanfangGeld verdienen im Internet
eBook HTML-Seminar.de
del.icio.usMister Wong         HTML 5SeitenanfangGeld verdienen im Internet
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de