Videoplayer auf PCGH

crys_

Software-Overclocker(in)
Ich wollte mal wissen warum ihr auf der Webseite für den Videoplayer immer noch auf Flash setzt anstatt auf HTML5? Der Player funktioniert oft mehr schlecht als recht und auf Android (Chrome) ist das Ding nicht nutzbar, sowohl auf der Desktop- als auch auf der Mobilseite.
Danke :)
 
Die PCGH ist den Motto treu: Internet ist Neuland! Somit ist auch die Webtechnik äußerst veraltet.
 
Hallo,

Wir setzen sowohl Flash als auch HTML5 ein. Welcher Player verwendet wird hängt davon ab, ob der jeweilige Client Flash unterstützt oder nicht. Wenn kein Flash vorhanden ist, kommt ein reiner HTML5-Player zum Einsatz. In der Mobil-Ansicht gibt's gar kein Flash, sondern nur einen HTML5-Player. Flash wird bei uns nach wie vor eingesetzt, da wir leider nicht im luftleeren Raum agieren können, sondern auf die Anforderungen bei der Einbindung der Werbung vor und nach dem Video Rücksicht nehmen müssen. Es ist jedoch keineswegs so, dass wir auf Flash statt auf HTML5 setzen, sondern wir verwenden sowohl als auch - je nach Client-Fähigkeiten.

Die Werbung im allgemeinen und im Videoplayer im besonderen wird nicht von uns ausgeliefert, sondern kommt über den AdServer unseres Vermarkters, der allerdings seinerseits eine Kette weiterer AdServer einbindet. Hierfür wird ein Standard namens VAST2 eingesetzt, bei dem Informationen zu Werbeclips, Weiterleitungen, View- und ClickThrough-Messungen sowie Frequenz-Limitierungen zwischen Player und Servern(n) über XML ausgetauscht werden. Diese XML-Kommunikation über Domain-Grenzen hinweg wird in Flash und HTML5 über unterschiedliche Mechanismen abgesichert. Bei Flash liegen XML-Dateien im Root-Verzeichnis der Server, in denen steht, welche Hosts/Domains Resourcen dieses Servers einbinden dürfen. Dieser Standard ist schon verhältnismäßig alt, dementsprechend weit verbreitet und wird von allen AdServer-Betreibern auch korrekt umgesetzt. Bei HTML5 heißt die betreffende Technik CORS. Hier gibt es keine zusätzlichen XML-Dateien auf dem AdServer, sondern der AdServer muss auf Anfragen des Clients reagieren und neben den eigentlichen XML-Nutzdaten auch noch einen korrekten Header übertragen. Das wird noch nicht von allen AdServer-Betreibern zuverlässig umgesetzt.

Auch kommt es häufig zu weiteren Fehlern in der Umsetzung von Video-Kampagnen, beispielsweise werden Formate verwendet, die nur von Flash (z.B. flv-Videos) abgespielt werden können. Hinzu kommt, dass beispielsweise Firefox erst seit Januar dieses Jahres H.264 nativ unterstützt und die Unterstützung dort meines Wissens nach noch immer nicht über das Baseline-Profil hinausgeht. Ältere Opera-Versionen unterstützen gar kein MP4-Playback.

Fakt ist, dass der Flash-Videoplayer, obwohl er bei über 80% unserer Video-Views verwendet wird, generell die wenigsten Probleme macht. Auf allen Plattformen mit Flash-Support funktioniert der Player exakt gleich, Flash hat eine grundsolide Unterstützung für alle üblichen Video-Formate und Codecs und der Player-Code ist äußerst ausgereift und sehr schön um weitere Features erweiterbar. Fehler in dem gesamten Kommunikationsablauf zwischen dem Client und den beteiligten Servern werden abgefangen und führen nicht zu Totalausfall des Players.

HTML5 dagegen ist trotz des riesigen Hypes immer noch geplagt von sehr unterschiedlichen Implementierungen auf verschiedenen Plattformen - gerade Android ist da der blanke Horror. Wir sind bemüht, auch unter der Mehrzahl der Android-Devices, die ja schon seit längerem ebenso flash-frei sind wie iOS, eine möglichst breite Client-Unterstützung zu gewährleisten. Da jedoch die Geräte höchst unterschiedlich sind, je nachdem welche Hardware zum Einsatz kommt, auf welchem Patch-Level das Android ist, ob der vom Hersteller verkrüppelte Stock-Browser oder ein nativer Chrome zum Einsatz kommt, ob der User CyanogenMod installiert hat und wenn ja, in welcher Version, ob Video inline oder nur im Vollbild wiedergegegeben werden kann, ob die JS-Implementierung das Abfangen bestimmter Fehler in z.B. XML-Kommunikation oder Codecs zulässt oder nicht, sind die Ergebnisse entsprechend ebenfalls höchst unterschiedlich.

Bei einem Video-Player ist es schon wegen Fähigkeiten wie Qualitäts-Umschalter, Vorwärts-/Rückwarts-Skippen, Play, Pause, Lautstärke und einigen weiteren Features, ganz abgesehen eben vom VAST2-Support für die Werbeeinbindung, bei weitem nicht damit getan, ein simples <video>-Tag in den Quelltext zu setzen - das video-Tag definiert keinen Player, sondern nur die direkte Einbindung eines Videos ohne jegliche Kontroll-Elemente, ganz analog im img-Tag für Bilder. Weder wir noch die gegenwärtigen (externen) Entwickler des HTML5-Players bzw. der HTML5-Komponente zur Werbeeinbindung können zudem alle auf dem Markt befindlichen iOS,- Android- und Windows-Geräte anschaffen, um umfangreiche Tests in allen denkbaren Variationen durchzuführen und die verfügbaren Emulatoren sind hierfür in der Regel völlig unbrauchbar - wenn das Abspielen von Videos im HTML5-Player unter Chrome (Webkit) auf dem Desktop (Windows, Linux) oder auch in einem Emulator völlig problemlos klappt, dann bedeutet das noch lange nicht, dass die verschiedenen Webkit- (oder wenigstens Chrome-) Varianten auf den verschiedenen Android-Geschmachsrichtungen auch klarkommen. Das Debugging der meisten Mobilgeräte ist ebenfalls unverhältnismäßig kompliziert, oft wirft die Plattform auch gar keine abfangbaren Fehler, sondern schweigt sich darin aus, aus welchem Grund ein Video nun nicht abgespielt wird.

Ein konkretes Beispiel: Wenn unser Vermarkter gerade kein Inventar zur Verfügung hat, wird ein kurzer Fallback-Clip von unter einer Sekunde ausgespielt. Das ist ein wenige millisekunden langes schwarzes Video. Je nach Plattform weigert sich der Browser allerdings weiterzumachen, wenn das Video unter einer Sekunde lang ist. Oder wenn die Abmessungen des Videos zu klein sind. Es gibt da keine abfangbaren Fehler, der Browser macht dann einfach mit dem Abspielen des nächsten Clips, des eigentlichen Videos, nicht weiter und das Bild bleibt schwarz. Nun kommt man erst einmal nicht sofort darauf, dass die Länge oder die Abmessungen eines Videos einen Einfluss darauf haben könnten, ob es im HTML5-Player abgespielt wird oder nicht. Man möchte natürlich auch kein zu langes Video wählen, da man seinen Usern nicht unnötigerweise einen merklichen schwarzen Clip vor jedem Video zeigen möchte und um auch die Datenrate für dieses Fallback-Video zu reduzieren. Und das ist nur eine Merkwürdigkeit unter vielen im großen hässlichen Umfeld von HTML5-Video auf den verschiedenen mobilen Endgeräten.

Von daher: Wir bewegen uns anders als Youtube nicht in einem hermetischen Umfeld, in welchem wir die Kontrolle über die gesamte Auslieferungskette einschließlich der Werbeauslieferung besitzen; auf Fehler die von Dritten wie eben AdServer-Betreiber verursacht werden, habe wir keinen Einfluss, Unzulänglichkeiten der einzelnen Mobilplattformen sind oft schwierig zu identifizieren und zu umschiffen. HTML5 ist im Gegensatz zu Flash ein plattform-fragmentiertes Ungetüm mit den unterschiedlichsten Macken und Kinderkrankheiten auf verschiedenen Geräten. Ganz sicher ist HTML5 jedenfalls nicht irgendwie aus sich heraus "besser" als Flash. Fakt ist, dass wir auf verschiedenen Geräten eben kein Flash zur Verfügung haben und daher auf HTML5 setzen müssen. Mit unterschiedlichen Ergebnissen, je nachdem, ob und welche Bug die betreffende Client-Plattform in diesem Umfeld zu bieten hat. Würden alle nicht-flash-fähigen Clients HTML5, die üblichen Codecs sowie die zugehörige JavaScript-API und andere Standards (CORS etc.) sauber implementieren, dann gäbe es keine Probleme mit dem HTML5-Player und HTML5 wäre ebenso problemlos wie Flash. Das ist allerdings leider Wunschdenken. Und daher bitten wir um Nachsicht, wenn Videos u.U. nicht auf allen Endgeräten immer funktionieren.

Viele Grüße

Markus
 
Viel dank für diese extrem ausführliche Erklärung :wow:
Es leuchtet auch absolut ein und ich wollte da auch keine grobe Kritik äußern, es ist mir einfach aufgefallen und da ihr die Webseite ja erst neu entwickelt habt kam mir die Frage warum ihr erneut auf das "veraltete" Flash setzt.

Beim Videoplayer auf dem Desktop (Version 42.0.2311.90 (64-bit), OS X 10.10.3) habe ich z.B. oft das Problem das Werbung und Video gleichzeitig laufen, das nervt bisschen, ist aber verschmerzbar. Auf meinem Tablet und auf meinem Handy (siehe Sig, normaler weiße nutze ich das Tablet für PCGH) kann man Videos gar nicht angucken. Nachdem man auf den Play Knopf drückt passiert gar nichts mehr.

Und nebenbei bemerkt gefallen mir die Videos von euch inzwischen wirklich sehr, deshalb finde ich die Probleme mit dem Player etwas schade. Ich habe gerade mal Flash komplett deaktiviert, jetzt kommt der HTML5 Player - bin zufrieden :D


Noch als zweite kleine Kritik für Mobilgeräte:
Die Buttons in der oberen Menüleiste reagieren auf hover, sind also bei Tablets nicht zu bedienen. Da ihr das Forum schon komplett responsive gemacht hab (:daumen:) ist das etwas doof. Als Optimierung wäre es gut wenn man das Menü auf Mobilgeräten per click öffnen könnte, sind im Prinzip "ja nur" ein paar Zeilen Javascript.
Bildschirmfoto 2015-04-25 um 23.23.17.png
 
Noch als zweite kleine Kritik für Mobilgeräte:
Die Buttons in der oberen Menüleiste reagieren auf hover, sind also bei Tablets nicht zu bedienen. Da ihr das Forum schon komplett responsive gemacht hab (:daumen:) ist das etwas doof. Als Optimierung wäre es gut wenn man das Menü auf Mobilgeräten per click öffnen könnte, sind im Prinzip "ja nur" ein paar Zeilen Javascript.
Anhang anzeigen 820559

Ausführlich diesmal deshalb, weil die Frage immer mal wieder aufkommt - jetzt gibt's ein Posting, auf das man ggf. verweisen kann. Und danke für die Anregung mit der Anpassung der Foren-Navi - der Responsive-Skin des Forums kommt in der Grundversion nicht direkt von uns, sondern wurde ebenfalls lizenziert. Ich bespreche das mit meinen Kollegen, ob wir das Verhalten dort ändern können, ohne den Code des Skins umzuschreiben und damit möglicherweise ein Upgrade ins Stolpern zu bringen. Ich bin mir aber relativ sicher, dass wir das mit einem separaten Block JS und CSS hinbekommen und den Skin selbst dafür gar nicht anpassen müssen.

Viele Grüße

Markus
 
Ich hab mir das vor paar Tagen schonmal aus Neugier angeschaut (:P), und so müsste es funktionieren:

Code:
if(/mobile|android|iOS|iPhone|iPad/i.test(navigator.userAgent)) {
    $('.usermenu>li>a').href = '';
    $('.usermenu>li').click(function() {
        if (!searchstate) { 
            $('>ul',this).show();
         }  
    });
}

Das Verhalten ist auf Desktops unverändert und auf Mobilgeräten kann per click geöffnet werden :daumen: Würde mich sehr freuen wenn ihr das optimiert, ansonsten gefällt mir die neue Seite extrem gut :)
 
Das Verhalten ist auf Desktops unverändert und auf Mobilgeräten kann per click geöffnet werden :daumen:
Bei Deiner Lösung hätte man aber die Links in der ersten Ebene des Usermenüs, also Link aufs Profil (beim Usernamen), private Nachrichten (Briefsymbol) und Kontrollzentrum (Zahnrad) auf Mobil nicht mehr "klicken" können.

Wir haben das jetzt etwas anders gelöst: Per Tap öffnen sich die Menüs, aber per Doubletap kann man trotzdem die Links der ersten Ebene erreichen.

Mobilgeräte oder Tablets reagieren übrigens schon auf hover, ein Tap löst sowohl click als auch hover/mousover aus. Das Problem ist nur dass die Menüpunkte oben auch verlinkt sind. Dann wird bei einem Tap gleichzeitig das Menü und der Link geöffnet. Je nach Auslastung des Geräts klappt das aber mehr oder weniger gut. Mit der obigen Lösung, die auch einen neuen Touch-Handler verwendet, sollte das zuverlässig funktionieren.
 
Gad probiert, funktioniert wunderbar!
Finde es Klasse das ihr so flexibel auf Feedback eingeht.
:pcghrockt:

Eure Lösung gefällt mir sogar besser als meine, da hat halt der direkte Zugriff gefehlt.
Wobei es die wenigsten entdecken werden das man mit Doppelklick direkt ins Profil kommt :schief:
 
Kann ich in meinem Chrome erzwingen das der HTML5 Player verwendet wird bei euch? Denn aktuell bleibt bei eurem Player das Bild nach ein paar Sekunden stehen im Vollbild, der Ton läuft aber weiter. Ich erhoffe mir mit dem anderen Player das Problem zu lösen? :D
 
Naja das finde ich schon unpraktisch, warum kann man denn nicht einfach selber wählen welchen Player man möchte, ist das so schwer? (Ich habe davon keine Ahnung, bin kein Programmierer, aber ich stelle mir das nicht kompliziert vor?)

Gruß
 
Ich wollte den html5 player auf eurer seite erzwingen, nicht komplett flash deaktivieren. Bin auf wesentlich mehr Seiten als auf eurer unterwegs.
Aber ist auch nicht so wild, so oft gucke ich hier keine Videos, viele gibts ja auch bei YouTube.
Seht es als Verbesserungsvorschlag.
 
hätte auch gerne die Wahl, ob HTML5 oder Flash... egal ob Flash gerade aktiv ist oder nicht...
 
Zurück