Videos im Internet mit HTML5

Moderne Browser bringen den Mediaplayer gleich selbst mit: Mit HTML5 binden Sie Videos fast so einfach in eine Webseite ein wie Bilder. Wie das geht, zeigt der folgende Artikel.

Wollten sie bisher ein Video auf Ihrer Website anbieten, konnten Sie es als Flash-Video samt Flashplayer einbetten oder zum Download anbieten. Doch das Flash-Format bleibt umstritten, nicht zuletzt wegen Sicherheitslücken. HTML5 nutzt die in den Browser integrierten Mediaplayer und benötigt nur ein HTML-Tag sowie die korrekte Video-Codierung für das Streaming-Video.

Player-Steuerungen: Opera, Chromium, Firefox und IE 9 bringen eigene Mediaplayer mit, die mit HTML5 eingebettete Videos abspielen

Die passenden Videoformate: Beim Festlegen des HTML5-Standards konnten sich die Browser-Hersteller nicht auf ein einheitliches Videoformat einigen, daher existieren zwei Gruppen von Browsern:

Apple und Microsoft unterstützen in ihren Browsern Safari (ab 3.1) und Internet Explorer 9 das MP4-Format H.264.

Firefox, Chrome und Opera spielen in aktuellen Fassungen dagegen das von Google freigegebene Format WebM sowie das Open-Source-Format Ogg Theora ab. Für den Internet Explorer bietet Google ein WebM-Plug-in an, für Safari soll es folgen.

Um möglichst vielen Besuchern ein Video anzubieten, sollten Sie daher mindestens zwei der Formate bereithalten.

2. Teil: „Videos für HTML5 konvertieren“

Videos für HTML5 konvertieren

Videos mit Handbrake transkodieren: Wandeln Sie Ihre Videodateien schnell und einfach aus fast jedem Format in H.264/MP4 um - auch fürs Videostreaming von einer Website

Falls Ihre Videos noch nicht im passenden Format vorliegen, installieren Sie sich von der Webseite das Firefox-Add-on Firefogg und starten Firefox anschließend neu. Blenden Sie über „Firefox, Einstellungen“ die Menüleiste ein und öffnen Sie dann „Extras, Make Web Video“. Wählen Sie mit „Select File“ die Videodatei auf der Festplatte aus. Unter „Format“ entscheiden Sie sich für „WebM“ oder „Ogg“ und unter „Preset“ wählen Sie eine Standardkonfiguration von „160p“ bis „1080p“, je nach gewünschter Qualität. Nach einem Klick auf „Encode“ legen Sie den Speicherort fest.

Mit dem kostenlosen Tool Handbrake steht ein Video-Transcoder für das Format H.264 für Windows, Mac OS X und Linux bereit. Hier wählen Sie mit „Source“ Ihre Videodatei aus und geben unter „Destination“ den Speicherort für das auszugebende Video an. Die Datei-Endung „.m4v“ können Sie später gefahrlos in „.mp4“ ändern. Als einzige Abweichung von den Vorgaben wählen Sie „Web optimized“ um Ihr Video fürs Streaming vorzubereiten.

3. Teil: „Web-Videos in HTML einbetten“

Web-Videos in HTML einbetten

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:

Code-Beispiel

1 2	<video width="640" height="480" controls poster="titel.jpg"> <source src="test.webm" type="video/webm" />

…

Code per E-Mail versenden

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:

Code-Beispiel

1 2	AddType video/webm .webm AddType video/ogg .ogv .ogg

…

Code per E-Mail versenden

4. Teil: „Eigene Steuerelemente für HTML5-Videos“

Eigene Steuerelemente für HTML5-Videos

Für die komfortablere Bedienung fügen Sie etwas Javascript hinzu. So haben Sie Zugriff auf die meisten Abspielparameter. Zunächst ergänzen Sie das -Tag um einen „Identifier“. Im Beispiel ist das id=myVideo. Fügen Sie am Ende der HTML-Datei, aber innerhalb des -Tags, dieses Script ein:

Code-Beispiel

1 2	<script type="text/javascript" > _myVideo = document.getElementById("myVideo"); </script>

…

Code per E-Mail versenden

Der komplette HTML-Code: Mit diesen wenigen Zeilen HTML und Javascript basteln Sie sich einen eigenen Mediaplayer für Ihre Website

Für die Schaltflächen benutzen Sie am besten -Tags, in die Sie die Javascript-Anweisungen integrieren. Wie beispielsweise zum Starten des Videos: Start.

Videoplayer nach Wunsch: Schaltflächen und -Element lassen sich mit CSS gestalten und etwa mit runden Ecken versehen

Mit weiteren Schaltflächen verbinden Sie dann weitere Funktionen. So steht _myVideo.pause() für das Anhalten des Films. Mit _myVideo.current Time+=10 spulen Sie zehn Sekunden vor. Das gleiche zurück erreichen Sie mit _myVideo.currentTime-=10).

Die Lautstärke passen Sie mit _myVideo.volume+=0.5 oder _myVideo. volume-=0.5. Dabei können Sie auch größere oder kleinere Schritte wählen. Achten Sie darauf, dass für den Dezimaltrenner ein Punkt verwendet wird. Mit CSS gestalten Sie dann Ihre Player-Steuerung nach Wunsch.