Videos im Internet mit HTML5

Web-Videos in HTML einbetten

von Christoph Jopp - 13.12.2011
Um sicher zu gehen, dass auch der Internet Explorer 9 im richtigen Modus läuft, geben Sie oben in Ihrer HTML-Datei den Dokumententyp an:
Innerhalb des -Tags betten Sie das Video ein:
<video width="640" height="480" controls poster="titel.jpg">
<source src="test.webm" type="video/webm" />
<source src="test.ogv" type="video/ogg" />
<source src="test.mp4" type="video/mp4" />
</video>
Mit width und height geben Sie die Größe an, die Ihr Film auf der Website einnehmen soll. Idealerweise benutzen Sie dafür die Originalgröße des Videos.
Der Parameter poster steht für ein Bild, das der Browser anzeigen soll, solange das Video nicht gestartet ist. Sie können ihn auch weglassen, dann zeigt der Webbrowser das erste Bild des Films an. Durch die Angabe von controls weisen Sie den Browser an, Bedienelemente zum Abspielen des Videos einzublenden. Die -Tags schließlich verweisen auf die abzuspielenden Video-Dateien. Der Browser sucht sich daraus ein Format aus, das er abspielen kann. Im Beispiel liegen die Videodateien im selben Verzeichnis wie die HTML-Datei.
Um sicher zu gehen, dass Ihr Video per Streaming zu erreichen ist müssen Sie eventuell dem Webserver die entsprechenden MIME-Types mitteilen. Am einfachsten legen Sie dafür im Verzeichnis der Website eine Textdatei mit dem Namen .htaccess. Vergessen Sie dabei nicht den vorangestellten Punkt im Dateinamen, der für eine „versteckte“ Datei steht. In dieser Datei speichern Sie nun folgende Angaben:
AddType video/webm .webm
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4 .m4v