Die Großartigkeit von MediaElement.js
20. Juni 2011
Ich habe mich lange Zeit gesträubt, im großen HTML5-Videoplayer-Vergleich einen Sieger zu küren, doch eigentlich war es die ganze Zeit klar: Es ist MediaElement.js von John Dyer
Der Player hat vier entscheidende Vorteile:
- Er wird aktiv weiterentwickelt. John ist sehr engagiert und antwortet im github auf Bug Reports
- Er ist übersichtlich aber erschöpfend dokumentiert
- Er beherrscht sowohl Video als auch Audio
- Er bietet eine extrem clevere Verschmelzung von nativem HTML5 und Flash-Fallback.
Letzteres ist eine weitere Erläuterung wert: MediaElement.js nimmt die offizielle HTML5-JavaScript-API-Befehle zum Manipulieren der Player-Eigenschaften und leitet sie gewissermaßen an den dafür präparierten Flashplayer weiter. Es ist also für den Anwender ganz egal, ob sich der Browser gerade nativ um das Abspielen der Videos kümmert oder bereits an Flash übergeben hat – die API zum Steuern des Players bleibt exakt gleich! Der Vorteil hierbei: Die (natürlich immer noch notwendige) SWF-Playerdatei besteht im Grunde nur aus einer einfachen Projektionsfläche, an die diverse Event-Listener geklebt wurden, die auf die nativen JavaScript-Befehle hören, welche zum Steuern des Players verwendet werden. Somit braucht man als Webdesigner beim Skinnen des Players nur mit CSS zu hantieren, denn auch das Flash-Fallback wird über die selben HTML-Elemente und JavaScript gesteuert! (Das gilt übrigens sogar für Silverlight, wenn man das unbedingt möchte …)
Darüber hinaus versteht sich der Player sogar auf RTMP-Flash-Streams, beherrscht unter Mac OS X echtes Vollbild, kann sowohl Kapitelmarken als auch Untertitel anzeigen, und letztere sogar in mehreren Sprachen ausgeben. Die automatische Übersetzung über die Google Translate API wird allerdings in Kürze kaputt gehen, aber das liegt natürlich an Google …
Ich habe in der letzten Woche ein sehr hübsches Projekt mit MediaElement.js umgesetzt und war zu jeder Zeit äußerst zufrieden mit dem Player. Well done, John!