Die Großartigkeit von MediaElement.js

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!

3 Kommentare

Runa Gisladottir

Hm, ich habe noch immer nicht verstanden, warum man einen Player braucht, wenn man keinen hohen Anteil an IE<9 unter seinen Besuchern hat. Ich kenne allerdings auch keinen normalkleinen Webseitenbetreiber, der mehr als mal ein einzelnes Video auf seiner Seite hat und das dann auch auf seinem eigenen Server liegen hat und nicht über Youtube oder Vimeo einbettet.

Wir haben einen anderen Player aus Gerrits Test, der aber nur eingreift, wenn mal jemand mit IE7 vorbeischaut. So schön das UI auch sein mag, es sieht doch stets wie ein draufgepflastertes Flash-Embed aus. Um es einigermaßen an das Design der Webseite anzupassen, muß man in die SWF rein – aber dafür Flash installieren? Ohne Player bekommt der Besucher das ihm gewohnte Video-Design seines Browsers serviert, das IMHO besser und weniger flashig aussieht als das der meisten Player.

MediaElement.js sieht noch gut aus (offenkundig eine Fusion auf den UIs von Chrome und Opera), aber auch dieser Player ist eher eine akademische Ãœbung für Geeks, die wenig Video-Content auf ihrer Seite anbieten und sich daher auch keine Gedanken über eine langfristige Formatstrategie machen müssen.

Ogg Theora wird bei MediaElement.js anscheinend als Format der Vergangenheit behandelt (http://mediaelementjs.com#devices) und muß auf FF, Chrome und Opera gefallbackt werden, was den Player für den ambitionierten Einsatz sofort disqualifiziert.

Denn für das angebliche Format der Gegenwart, WebM, ist mir kein Tool bekannt, das ordentliche Bildqualität erzeugen kann (wir probieren es seit einem halben Jahr). Selbst wenn das irgendwann möglich sein wird, müßte der ambitionierte Betreiber alles konvertieren, was er bisher veröffentlicht hat.

Statt Ogg Theora, das 98% Prozent unserer Besucher sehen können, wird dafür WMV unterstützt, ein Uraltformat, das ohnehin migrieren müßte und auf HTML-5-Seiten nichts zu suchen hat.

Mir leuchtet die Formatstrategie von MediaElement.js also überhaupt nicht ein. Wenn ich sie mit unseren Nutzerstatistiken in Beziehung setze, dann würde MediaElement.js bei uns wohl bei zwei Dritteln aller Besuche fallbacken. Das halte ich für eine HTML-5-Webseite, die Videos in H264 und OGV anbietet, für keine gute Quote.

Gerrit

@Runa: Das ist nicht richtig. Wenn du Videos in MP4 und OGG vorhältst, wird Flash nicht geladen. In der Tabelle steht zwar immer WebM, aber für OGG gelten exakt die gleichen Verhaltensregeln.

Das mit dem Anpassen der SWF ist ja gerade der Clou bei MediaElement.js: Man muss es nicht machen, weil er die Controls vom nativen Player nimmt und damit den Flashfilm steuert!

Und mit einem WordPress-Plugin (das es übrigens auch gibt), wird mejs zum alltäglichen Tool, absolut nicht nur für Freaks und Bastler.

John Dyer

Thanks for your kind words. Glad you found MediaElement.js helpful.

Kommentar verfassen

Mit dem Absenden dieses Formulars erklären Sie sich damit einverstanden, dass ich die von Ihnen eingegeben Daten auf meinem Webserver speichere. Ihr Name, der Kommentartext und die angegeben Website werden für die anderen Besucher von praegnanz.de angezeigt. Ich gebe jedoch insbesondere Ihre E-Mail-Adresse nicht an Dritte weiter und nutze diese auch nicht zu Marketing- oder Statistik-Zwecken. Sie können alle Daten zu einem späteren Zeitpunkt wieder entfernen lassen.