Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

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 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 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:

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.

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

X

Wenn Sie einen Fehler finden, bitte mitteilen
(egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:

Fehler:

Verbesserung:

Name/E-Mail (damit ich auch Danke sagen kann)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2015 Axel Pratzner • www.html-seminar.de • Stand 18.8.2015
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de