Kleine Helfer

Mit MediaElementPlayer HTML5-Video für jeden Browser

10.08.2011 | von Diego Wyllie (Autor) 
Diego Wyllie
Diego Wyllie hat Wirtschaftsinformatik an der TU München studiert und verbringt als Softwareentwickler und Fachautor viel Zeit mit Schreiben – entweder Programmcode für Web- und Mobile-Anwendungen oder Fachartikel rund um Softwarethemen.
Email:
Egal ob Internet Explorer, Firefox, Safari oder Chrome, ob auf dem PC, iPhone, iPad oder Android-Smartphone: Mit dem JavaScript-Framework "MediaElementPlayer" funktioniert HTML5-Video in jedem Browser und auf jedem Gerät.
Mit nur wenigen Zeilen HTML5-Code wird ein universeller Video-Player implementiert, der in allen gängigen Browsern funktioniert.
Mit nur wenigen Zeilen HTML5-Code wird ein universeller Video-Player implementiert, der in allen gängigen Browsern funktioniert.
Foto: Diego Wyllie

Wenn es um das Abspielen von Multimedia-Content geht, bietet die neue HTML5-Spezifikation klare Vorteile gegenüber dem bis jetzt erforderlichen Einsatz von Plug-ins. So lassen sich mithilfe der neu eingeführten Konstrukte <video> und <audio> Multimedia-Dateien direkt in die Website integrieren, unkompliziert und schnell. Die neuen HTML-Tags können dann wie jedes weitere DOM-Objekt (Document Object Model) behandelt und mittels CSS und JavaScript nach eigenen Anforderungen manipuliert werden.

Ein Problem ist, dass ältere Browser, die noch sehr häufig verwendet werden (zum Beispiel der Internet Explorer 8), den neuen HTML-Standard nicht unterstützen. Man kann also auf Plug-ins wie Flash oder Microsofts Silverlight noch nicht verzichten. Wer dennoch schon heute die Möglichkeiten von HTML5-Video nutzen möchte, der kann auf den MediaElementPlayer zurückgreifen. Dabei handelt es sich um eine kostenlose JavaScript-Bibliothek aus der Open-Source-Szene, die mithilfe von CSS und dem populären Framework "JQuery” einen universellen Video-Player implementiert.

Die Library erlaubt es Web-Entwicklern, im HTML-Code ausschließlich mit dem Video-Tag zu arbeiten (siehe Code-Beispiel). Wenn die Seite geladen wird, prüft ein Skript (MediaElement.js), welcher Browser den Request gesendet hat. Unterstützt der identifizierte Browser die HTML5-Spezifikation nicht, so wird der Video-Tag automatisch durch einen Flash- beziehungsweise Silberlight-Plugin ersetzt. Ansonsten wird der Code ohne weiteres nativ ausgeführt. Was die Kodierung der Videodateien angeht, können verschiedene Formate verwendet werden, darunter H.264, WMV und FLV.

CW-Fazit

Dank MediaElementPlayer können Web-Entwickler schon heute mit HTML5-Video arbeiten, ohne sich um Rückwärtskompatibilität sorgen zu müssen. Eine clevere Lösung, die leicht zu implementieren ist.

Newsletter 'Software' bestellen!