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).
Browser | Ogg Theora (.ogg) | h.264 (.mp4) |
---|---|---|
Firefox | Ja | |
Internetexplorer | ||
Opera | Ja | |
Chrome | Ja | Ja |
Safari | Ja | |
iPhone | Ja | |
Android | Ja |
Stand 2010 (relevant, wenn für alte Browserversionen Inhalte gemacht werden sollen)
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 auf ein unbestimmtes Jahr 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 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 folgenden Attribute mitgegeben werden:
- src
- width
- height
- poster
- autobuffer
- autoplay
- controls
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 angezeigte Breite der Videos
height – die angezeigte Höhe des Videos
poster – ein Bild, das angezeigt wird, wenn das Video noch nicht gestartet wurde. Das Attribut poster
wird nicht von 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 (dieses Video ist kostenlos und frei nutzbar, wenn es in diesem Zustand belassen wird): https://www.html-seminar.de/video/maus-maus-aus-3.ogg (rechts Maustaste darauf klicken und „speichern unter“ wählen, falls nicht automatisch der Download angeboten wird)
<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 schnell einfängt: Ich werde aus Gründen der Lizenzrechte hier nur das „Ogg Theora“ verwenden, auch wenn nur zurzeit Chrome, 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/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 spucken Videos aus, aber leider im falschen Format. Dann einfach in das gewünschte Format konvertieren.
Ein sehr vielseitiges Konvertierungsprogramm mit dem schönen Namen „XMedia Recode“ als freie Software gibt es unter:
https://www.xmedia-recode.de/
Diese nutzt ffmpeg - wer also gerne Batch-Dateien schreibt, kann auch ffmpeg nutzen.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details