Das HTML5 Video-Element

Es gibt immer noch viele Internetseiten, die auf die bereits veralteten Flash-Videos setzen. Heute möchte ich gerne zeigen, wie man das neue HTML5 <Video>-Element verwendet.

Das Video-Element ist neu in HTML5 und bringt im Gegensatz zum Flash-Video-Player einige Vorteile. Der wahrscheinlich größte Vorteil ist, dass diese Videos auch auf mobilen Endgeräten wiedergegeben werden kann. Ein Nachteil hingegen ist, dass zwar die aktuellen Browser (sogar der Internet Explorer) HTML5 und das Video Element unterstützen, ältere Browser hingegen jedoch nicht. Um dieses Problem zu umgehen, kann man allerdings ganz einfach ein Flash Fallback einbauen.

Wie bindet man den Video Tag ein?

Wie bei einem normalen HTML Element bindet man das Video Element über den <video> Tag ein. Hier hat man dann weitere Möglichkeiten, wie man das Element nutzen möchte. Hierzu kann man über control  zum Beispiel die Steuerelemente anzeigen lassen. Zudem kann man über width und height die Breite und Höhe festlegen. Weitere, oft verwendete Attribute sind außerdem noch preload=“auto“, was automatisch das Video herunterlädt und das poster=“poster.jpg“ Attribut, welches ein Titelbild anzeigt.

Als nächstes müssen noch die Videos eingebunden werden. Dafür sollte das Video zunächst im MP4, WebM und OGG Format vorliegen, damit die Videos in verschiedenen Browsern angezeigt werden können. Um diese Formate zu erstellen, kann man verschiedene Konverter benutzen. Es sollte darauf geachtet werden, dass beim Video erstellen ein guter Grad zwischen Qualität und Dateigröße gewählt wird.

Wenn dies geschafft ist, kann auch schon die Videos verlinkt werden. Dazu sollte innerhalb des Video Elements folgende Zeilen eingefügt werden:

src=“video.mp4″ type=“video/mp4″>
src=“video.ogg“ type=“video/ogg“>
src=“video.webm“ type=“video/webm“>

Der Quell-Tag dient dazu, dass der Browser später auch das Video findet. Über den type Attribut, kann der Browser später wählen, was dieser abspielt/abspielen kann.

Flash Fallback

Da es immer noch Nutzer gibt, die ihren Browser nicht updaten (können), sollte immer noch ein Flash Fallback eingebunden werden, was aufgerufen wird, wenn der Browser kein HTML 5 unterstützt.

Aufgrund von Diensten wie http://osmf.org/configurator/fmp/, ist es auch gar nicht mehr Zeitaufwendig für ein solche Absicherung zu sorgen. Bei diesem Dienst lädt man nur noch das Video hoch bzw. gibt die Quelle an und gibt die passenden Werte ein. Schon bekommt man seinen Quellcode, der sofort eingebunden werden kann.

 

Browser die HTML5 Video unterstützen

MP4

• Safari 3+
• Internet Explorer 9+
• Chrome 4+

OGG

• Firefox 3.5+
• Chrome 3+
• Opera 10.5+

WebM

• Firefox 4+
• Chrome 6+
• Opera 10.6+