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

drwitt

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

Grüße aus Kiel

Cedric

Wow! Vielen Dank! :)

Willi

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

Gerrit

@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.

Christian

Danke!

Dennis

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

Felix de Ruiter

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

Marcel

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!

Sascha Kluger

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 ;].

doob

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.

_nicolas

Grandios. Herzlichen Dank!

alexander farkas

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.

Seemann

Sehr feine Sache und vielen Danke!

Tim Latz

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 :)

Christian Boltz

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. ä.)?

alexander farkas

@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.)

Manuel

Sehr cool! Danke!

Dirk Jesse

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.

Philip Bräunlich

@alexander farkas

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

zanda

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. :)

crissi

Kompliment – Gruber hat Euch verlinkt

Jessica

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

Roland

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

Anon

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

Gerrit

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

alexander farkas

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.

Gerrit

@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.

klingon

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.

Gerrit

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

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

f5alex

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

alexplus

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.

Ingo

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.

Martin Michaelis

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 verfassen