HTML5: Video einbinden mit dem video-Element
HTML5-Logo (Quelle: www.w3.org)

HTML5: Video einbinden mit dem video-Element

Dieser Artikel beschreibt, man ein Video in eine HTML5-Webseite einbinden kann und welche Problem in Verbindung mit dem IE auftreten können.

Mit dem video-Element, welches mit HTML5 eingeführt wurde, lässt sich mit wenig Aufwand ein Video in eine Webseite einbinden.

HTML5-Code zum Einbinden eines Videos

1
2
3
4
5
<video>
   <source src="/html5-video.mp4" type="video/mp4">
   <source src="/html5-video.webm" type="video/webm">
   Das HTML5-Video-Element wird von Ihrem Browser nicht unterstützt.
</video>
Mit einem Doppelklick kann der gesamte Code markiert werden.

In dem Beispiel wird neben einer .mp4-Videodatei eine Datei vom Format .webm eingebunden. Diese ist nötig, weil einige Browser (z.B. Mozilla Firefox und Microsoft Internet Explorer) die mp4-Version nicht abspielen.

Browser-Unterstützung der Dateiformate

Browser mp4 ogg webm
Chrome unterstützt unterstützt unterstützt
Firefox   unterstützt unterstützt
Safari unterstützt    
Opera   unterstützt unterstützt
Internet Explorer unterstützt    

Automatisches Abspielen aktivieren

Um das Video automatisch abspielen zu lassen, muss dem video-Tag das Attribut autoplay zugewiesen werden.

1
<video autoplay>
Mit einem Doppelklick kann der gesamte Code markiert werden.

Video vorladen lassen

Um das Video vorladen zu lassen, muss zum video-Tag das Attribut preload hinzugefügt werden. Dem preload-Attribut können dann noch verschiedene Werte zugewiesen werden:

Wert Auswirkung
preload Videos werden vorausgeladen
preload="auto" Videos werden vorausgeladen
preload="none" Videos werden nicht vorausgeladen

Im Internet Explorer und Mozilla Firefox werden die Videos dabei vollständig vorausgeladen. Bei den Browsern Google Chrome und Opera werden nur die ersten 25 Sekunden geladen.

Video vorladen lassen

1
<video preload>
Mit einem Doppelklick kann der gesamte Code markiert werden.

Fehler: Nicht unterstützter Videotyp oder ungültiger Dateipfad

Möglicherweise erkennt der Internet Explorer die Videodatei nicht, obwohl sie in anderen Browsern abgespielt werden kann. Der Grund dafür ist, dass der Server den Dateitypen für die Endung der Videodatei nicht korrekt ausliefert. Folgende Fehlermeldung tritt dann auf:

Fehler: Nicht unterstützter Videotyp oder ungültiger Dateipfad
Fehler: Nicht unterstützter Videotyp oder ungültiger Dateipfad

Das Problem kann gelöst werden, indem man eine .htaccess-Datei im Video-Ordner anlegt. Diese muss dann folgenden Inhalt haben:

Der Code für die .htaccess-Datei

1
2
3
AddType video/ogg ogg
AddType video/mp4 mp4
AddType video/webm webm
Mit einem Doppelklick kann der gesamte Code markiert werden.

Geschrieben von: Jens Richter