Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » Videos einbinden mit HTML5 <video>

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

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

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.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details