praegnanz.de büro für intervernetzte medien

Gerrit, 10.09.2010

Der große HTML5-Videoplayer-Vergleich

Zwanzig Hyperlinks mit je einem Screenshot in einem Blogartikel verarbeiten kann ja jeder. Eine größere Aufgabe ist es schon, die ganzen HTML5-Videoplayer da draußen mal unter einheitlichen Bedingungen auf einer Testwebsite einzubinden und miteinander zu vergleichen.

Wieviel Arbeit es aber tatsächlich war, das kann man sich fast nicht vorstellen, denn wenn Philip und ich eines gelernt haben in den letzten zwei Wochen, dann ist es die Einsicht, dass Leute, die solche Scripte im Netz veröffentlichen, fast nie einen wirklich professionellen Anspruch an die äußere Form haben, wie sie ihre Scripte unter die Leute bringen wollen.

Demo-Installationen von Videoplayern sollten meines Erachtens Referenz-Implementationen sein, an denen man sieht, wie man’s richtig macht. Leider kam es einige Male vor, dass selbst die eine Referenz-Implementierung des Autors fehlerhaft war. Wir haben JavaScript debuggt, CSS-Pfade korrigiert, Timing-Fehler behoben und grenzwertige esoterische Verzeichnisnamen-Tabus entdeckt.

Schlicht: Es war die Hölle.

Dennoch können wir zufrieden sein: Derzeit versammeln sich 14 HTML5-Videoplayer (meist mit Flash-Fallback und JavaScript-Steuerungselementen) in unserer Liste, eventuell kommen noch zwei, drei weitere hinzu. Das bemerkenswert lustige Testvideo ist zum Glück nicht das tausendfach ausgelutschte Big Buck Bunny, sondern eine Realfilmproduktion, die es wesentlich einfacher macht, die Qualität des Codecs zu beurteilen.

So gehet hin und testet, bevor ihr euch für ein Script entscheidet. Oder macht selber eins! Aber wenn Ihr es veröffentlicht: Steckt ein bisschen Arbeit in Dokumentation und testet alles gut durch, bevor Ihr euch an die Öffentlichkeit wagt.

34 Kommentare

  1. drwitt am 10. September 2010 #

    Grandios! Danke, Gerrit – besonders fürs „nicht-nur-stumpf-sammeln-und-verlinken”.

    Grüße aus Kiel

  2. Cedric am 10. September 2010 #

    Wow! Vielen Dank! :)

  3. Johannes am 10. September 2010 #

    Hui, dankeschön.

  4. Willi am 10. September 2010 #

    Warum sehe ich denn den SublimeVideo HTML5 Video Player nicht in der Liste? Wurde der nicht sogar hier schon einmal vorgestellt? http://sublimevideo.net/

  5. Gerrit am 10. September 2010 #

    @Willi: E-Mail-Anfrage an Sublime ist seit Tagen raus – die rücken derzeit noch keine Beta-Accounts raus. Ist kein downloadbarer Player, sondern wird wohl ein reiner Webservice werden.

  6. Christian am 10. September 2010 #

    Danke!

  7. Dennis am 10. September 2010 #

    Danke, danke, danke, Philip und Gerrit! Und, haha, was für ein Video. ;) Wird gleich geflattred.

  8. Felix de Ruiter am 10. September 2010 #

    Korrekte Sache! Kompliment an den Urheber der Liste. Aber die Farbgebung dient nun wirklich nicht der Übersicht.

  9. Marcel am 10. September 2010 #

    Grandios. Ich habe in den letzten 2 Tagen gemerkt was für ein Pain in the As das ist. Aber wenn die Dinger laufen macht’s Spass!

  10. Sascha Kluger am 10. September 2010 #

    Danke für die sehr hilfreiche Übersicht. Btw: Die Kritik an der mangelhaften (bis nicht vorhandenen) Dokumentation nehme ich mir zu Herzen – auch wenn sie nicht überraschend kommt ;].

  11. doob am 10. September 2010 #

    danke für diesen vergleich, aber das video oder zumindest dieser ausschnitt ist echt daneben. so kann man das nicht im professionellen umfeld durch die gegend schicken, um diese wirklich wirklich wertvolle referenz zu würdigen.
    echt extrem dumme wahl.

  12. _nicolas am 11. September 2010 #

    Grandios. Herzlichen Dank!

  13. alexander farkas am 11. September 2010 #

    Danke, erstmal für die Gegenüberstellung.

    Du schreibst von Einbindeproblemen im allgemeinen. Mich würde natürlich persönlich interessieren, ob ihr Probleme hattet jme zu verstehen / Was man deiner Meinung nach besser machen kann.
    Ich weiß, dass bei jme die vielen einzelnen JS-Dateien ein Problem sein können (Wofür ist was da? Gibt es da schon ein Plugin/util dafür etc.. Allerdings gehört es bei jme zum Konzept, dass ich kein UI-Behavior mache/vorgebe, gleizeichtig möchte ich Scripte zur Verfügung stellen, mit denen man typisches UI-Verhalten von Playern nachbilden kann).

    Einen kleinen Fehler kann man hier übrigens jetzt schon sehen: Ihr habt sowohl die mm.embed.min.js als auch die mm.full.min.js eingebunden. Die full enthält allerdings bereits die embed-Logik, so dass der User mehr runterladen muß als nötig. (Ich glaube, dass keines meiner Beispiele das macht. Kannst du das auf einen »Fehler« in der Doku zurückführen?)

    Angesichts der Tatsache, dass die meisten Scripte beim fullwindow-Modus zu Fehlern führen, insbesondere wenn man das Fenster so klein schiebt, daß Scrollbalken entstehen, würde ich mich freuen, wenn jme mit dem fullscreen-/fullwindow-Plugin gezeigt werden würde. Das fullwindow-Plugin ist Teil des Standard-Download-Packets und es gibt hierfür sogar eine kleine fullwindow-/fullscreen-Dokumentation. Bereits mit der normalen Einbindung ist übrigens die normalisierte fullscreen-API im Safari 5.0+ vorhanden. Einfach mal $(›video‹).enterFullScreen(); in die Console eingeben und ausführen :-). (Wenn’s klappt gibt sie true zurück ansonsten false).

    Zumindest sollte, die Übersichtstabelle darauf hinweisen, dass es ein fullwindow-Plugin gibt.

  14. Seemann am 11. September 2010 #

    Sehr feine Sache und vielen Danke!

  15. Tim Latz am 11. September 2010 #

    Danke für diese Testseite, was ich nicht verstehen kann ist die Tatsache dass manche Entwickler Ihr Script fehlerbehaftet als Final deklarieren. Es macht sich schließlich nicht jeder die Mühe, dieses Geflecht As falschen Variable/Pfadangaben zu entwirren :)

  16. Christian Boltz am 12. September 2010 #

    Sehr schöne Übersicht!

    Trotzdem kann man noch ein paar Dinge verbessern ;-)

    * Bei »Video for everybody« und »HTML5 Video Player« gibt es kein Preview-Bild. Falls die beiden Player das wirklich nicht können, wäre eine Spalte »Preview-Bild« in der Übersichtstabelle gut.

    * Nochmal die Übersichtstabelle: Eine Spalte mit der ungefähren JS-Dateigröße wäre ganz nützlich. Auch wenn das JS im Vergleich zum Video ziemlich klein ist – wenn man nicht gerade YouTube heißt, gibt es viele Besucher, die nicht das Video, sondern irgendwas anderes auf der Seite ansehen. Für die ist das JS dann unnötig und es zählt wieder jedes kB. (Im Idealfall Größe von Framework (jQuery etc.) und »speziellem« JS getrennt angeben, weil man das Framework ja oft sowieso schon eingebunden hat.)

    * Im Menü sieht man nicht, wo man gerade ist. Bitte den aktiven Menüpunkt markieren.

    * Das Video ist wirklich nicht geschäftskunden-tauglich ;-) – wie wärs mit einem Alternativ-Video (per mitgeschleiftem URL-Parameter o. ä.)?

  17. alexander farkas am 12. September 2010 #

    @Christian Boltz

    Bezüglich fehlender Preview-Bilder. Hier wurde offensichtlich das poster-Attribut vergessen. Unabhängig davon, kann ein fehlendes/verschwindendes Poster bei HTML5-Videos in webkit-/opera- basierenden Browsern auftreten. Die einzelnen Scripte haben hier recht unterschiedliche mal gute/mal weniger gute (beispielsweise Verzerren des Preview-Bildes)/mal gar keine Strategien das zu verhindern.

    Was das html5media Script und jme angeht, wäre die Verwendung des preload-Attributs mit dem Wert none wünschenswert. (Eigentlich Verwenden meine Demos dies durchgehend.)

  18. Manuel am 13. September 2010 #

    Sehr cool! Danke!

  19. Dirk Jesse am 13. September 2010 #

    Danke für die Mühe, Gerrit. Falls Ihr Eure Tabelle noch erweitern wollte, wäre zur Bewertung der gebotenen Qualität sicherlich interessant, inwieweit sich die Player per Tastatur steuern lassen (Barrierefreiheit) und – da sie eh mehrheitlich jQuery erfordern, eine Scripting-API mitbringen, um sie ggf. per JavaScript ansteuern zu können.

  20. Philip Bräunlich am 13. September 2010 #

    @alexander farkas

    kontaktiere mich doch bitte mal zwecks deines fullscreen/window-plugins.
    info »@« stereonom.de
    danke

  21. zanda am 13. September 2010 #

    Hi Gerrit,

    super Übersicht!, vielen Dank.

    Es scheint zwar immer noch keinen »tadellos funktionierenden« HTML5 Player zu geben der »meinen« Ansprüchen gerecht wird…

    - jQuery basiert

    - FF, IE, SF & Chrome kompatibel

    - Preview Image

    - Fullscreen bzw. Fullwindow support

    - Flash Fallback

    - iOS fähig

    - GUI leicht anpassbar

    - Lightweight Script

    …jedoch hat sich schon »einiges« getan. :)

  22. crissi am 14. September 2010 #

    Kompliment – Gruber hat Euch verlinkt

  23. Jessica am 16. September 2010 #

    Wow. Was für eine Arbeit. Vielen Dank dafür.

  24. Roland am 16. September 2010 #

    Tolle Zusammenstellung, danke, wird mal sehr helfen!
    Gibt es vielleicht auch irgendwo einen HTML5-Audioplayer-Vergleich?

  25. Anon am 21. September 2010 #

    Very depressing video. Is it meant to be funny? Pretty bleak view of humanity you’re promoting there …

  26. Gerrit am 21. September 2010 #

    Man kann nun seine eigenen Video-URLs angeben, die man testen möchte!

  27. alexander farkas am 13. Oktober 2010 #

    Ich will ja nicht nerven, aber eure neue Spalte im Videovergleich über keyboard unterstützung und subtitles, läßt etwas zu wünschen übrig.

    Zu keyboard Unterstützung.

    jme unterstützt Tastatur-Nutzung und hält sich dabei an exakt das was Firefox mit dem Standard-Video-Element macht. Dennoch taucht in der Liste nicht auf das jme Tastaturnutzung unterstützt.

    Stattdessen tauchen plötzlich Scripte auf, die angeblich keyboard unterstützung haben sollen, die in Wirklichkeit die Tastaturnutzung zerstören.

    Beispiel flarevideo:
    Ich binde in einem meiner Einträge 2 Videos ein. Nun möchte ein User diesen Beitrag kommentieren. Er geht also zum Kommentarfeld, schreibt und versucht ein Leerzeichen zu drücken. Nur leider wird dies nicht nur unterbunden, plötzlich fangen ganz ungewollt die beiden videos an zu spielen.

    Beispiel leanback video:
    Ich gehe auf eine Seite möchte mich zurücklehnen und mit der Tastatur (Pfeiltasten) nach unten scrollen, doch halt das geht nicht mehr… Also möchte ich auf den Fehler hinweisen, aber auch hier darf man kein Leerzeichen mehr im Kommentarfeld drücken.

    Zu Subtitles:
    jme unterstützt neben normalen subtitles auch textuelle audio kommentare mit Wai-Aria. http://protofunc.com/jme/demos/player-captions.html

    Ich gebe mir im allgemeinen immer recht viel Mühe für Zugänglichkeit etc. zu sorgen.

    Wenn nun Player welche in Wirklichkeit vergessen haben, daß es button elemente, Wai-Aria etc. gibt (sprich unsemantisch arbeiten) und gleichzeitig die Tastaturbenutzung auf einer Webseite unmöglich machen, in gerade diesen Dingen punkten ist das etwas krank und ich etwas sauer.

  28. Gerrit am 13. Oktober 2010 #

    @alexander: Bitte beruhige dich, wir haben die Player nach bestem Wissen und Gewissen katalogisiert und getestet. Wir überprüfen das natürlich gerne nochmal nach deinen Hinweisen. Aber es gibt keinen Grund, »sauer« zu sein und die Liste als »krank« zu bezeichnen.

  29. klingon am 10. November 2010 #

    Danke für den Test. – Dieses Video als Testvideo ist allerdings total behämmert. Dazu braucht man etwas, das nicht ablenkt von der Begutachtung der eigentlichen Sache. Sich für jeden Player diese widerliche Szene wiederholt anschauen zu sollen ist schon eine herbe Zumutung.

  30. Gerrit am 11. November 2010 #

    @klingon: Dann nimm dein eigenes Video, trag unten die URLs ein, und alles ist gut.

    Wir konnten “Big Buck Bunny” einfach nicht mehr ertragen.

  31. f5alex am 14. Januar 2012 #

    Ich habe gerade ein paar Stunden damit verbracht ein paar Player zu testen (Danke Dir Gerrit für die Sammlung) und bin immer wieder am Safari gescheitert. Nach längerem Ausprobieren, Fehlersuchen, Neukodieren der Testvideos, Austausch der Referenzvideos hab ich festgestellt, dass es letztlich an der DivX Erweiterung lag, die ich – welch Wahnsinn – mal leichtfertig installiert hatte. Erweiterung rausgeschmissen und jetzt funzt’s.

    Nur mal so, falls da noch jemand drüber stolpert

    Mein Liebling für »mal schnell« ist übrigens VideoJS

  32. alexplus am 2. Mai 2012 #

    Ich freue mich schon auf die Fortsetzung dieses Artikels: Ein Artikel, indem geklärt wird, mit welchem Codec und welchem Tool man bei welcher Datenrate eine flüssige Wiedergabe erzeugt. Und welche Einstellungen die beste Qualität liefert.

  33. Ingo am 3. November 2012 #

    Hi,

    da ich mich erst seit kurzem mit diesem Thema beschäftige finde ich es klasse das es doch eine Seite gibt wo man die verschiedenen Player einmal unter die Lupe nehmen kann und nicht gezwungen wird das ganze web danach zu durchsuchen.

    Daher muss ich euch auch ein dickes Lob aussprechen für die Arbeit die sicherlich auch lange gadauert hat um das alles zu finden, da es ja eine unmengen davon im Web gibt.

  34. Martin Michaelis am 21. März 2013 #

    Eine erstklassige Übersicht. Tolle Arbeit, super Ergebnis.

    Ich war selbst schon vor Jahren auf der Suche, nach einem passenden Player. Leider gab es damals kaum Auswahl und vor allem keine Bloggerszene, die sich dieses Problems angenommen hatten. Hätte ich damals auf ein so umfangreiches Testergebnis zurückgreifen können, ich hätte mir etliche Stunden sparen können.

    Zum Thema Dokumentation seitens der Programmierer schließe ich mich Deiner Meinung vollumfänglich an. Da ist noch viel Spielraum nach oben. Ich habe immer noch ein Handbuch des C-64 im Schrank liegen. Ein Paradebeispiel sinnvoller Dokumentation.

    Mittlerweile nutze ich den Flowplayer, wenn ich oder meine Kunden das Video selber hosten, aber in den meisten Fällen lagern wir die Videos an youtube aus. Flowplayer hat mich insofern überzeugt, das sowohl Dokumentation wie auch Umfang der Funktionen sehr gut waren bzw. immer noch sind.

    Nochmal: Super Arbeit. Respekt!

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.