HTML5 Video Bug im Chrome Browser eliminieren

Bei der Betreuung der Website MyCosta ist uns ein Bug im Chrome-Browser aufgefallen, der das Vorausladen mehrerer Videos verhindert. Wie man diesen Bug ohne großen Workaround umgehen kann, soll hier kurz aufgezeigt werden.

Zusammenfassung:

Durch das Ergänzen der Attribute preload=“none“ und poster=“path/to/name.png“ im HTML-Video-Tag, kann man den Chrome-Bug eliminieren. Dieser taucht auf, sobald man versucht viele Videos auf einer Seite zu puffern, dadurch aber keine Vorschau erhält, da die Pufferzeit auf 25 Sekunden begrenzt ist.

Mit dieser Methode hat man die Möglichkeit beim Laden vieler Videos für jedes einzelne ein Vorschaubild festzulegen, was dem Kunden einen ersten Eindruck des Artikels suggeriert.

Ausführliche Fassung:

Bei MyCosta, einem Projekt von Netresearch, war es nötig, neben Bildern auf der Kategorieseite auch Videos anzuzeigen. Jedes Video sollte eine Vorschau zeigen, welche im Hintergrund heruntergeladen werden musste. So wird dem Kunden suggeriert, dass das Video bereits fertig geladen ist.

Das funktionierte alles super und in allen Browsern wurde eine Vorschau ausgegeben. Der Nutzer konnte somit einen Eindruck gewinnen, dann auf „Play“ drücken und das Video startete sofort ohne lange Ladezeiten abzuwarten.

Mit der Zeit kamen aber immer mehr Videos in den Artikellisten hinzu, was eigentlich kein Problem darstellen sollte, doch der Chrome-Browser ließ uns da etwas im Stich.

Das Problem im Chrome ist, dass dieser nicht in der Lage ist viele Videos zu puffern. Er bricht nach einer Pufferzeit von 25 Sekunden ab wo andere Browser 53 Sekunden Zeit einräumen. Das hatte zur Folge, dass in unseren Artikellisten zum Teil keine Vorschau angezeigt wurde.

Screenshot: Chrome Bug in der Artikelliste von MyCosta

Wir brauchten also eine Lösung, die den Bug beseitigt und keinen Einfluss auf alle anderen Browser nimmt. Wir fanden heraus, dass man den Video-Tag um zwei Attribute ergänzen kann, um ein Vorschaubild zu erhalten und eine hohe Bandbreite beim initialen Aufruf der Seite zu minimieren.

Es gibt die Attribute:

preload (optionale Angabe, Steuerung des Pufferverhaltens)

z.B.:  preload=“none“ (wenn das video nicht gepuffert werden soll)

und

poster (optionale Angabe, Zur Eingabe eines Vorschaubildes)

z.B.: poster=“path/to/data.png“

Die Einbindung könnte so aussehen:

Poster und Preload Attribut

Es ist eine schnelle und einfach zu implementierende Methode, HTML5-Videos in Chrome mit einem Vorschaubild zu versehen, ohne andere Browser zu beeinflussen, da diese auch mit diesen Attributen umgehen können.

Artikel teilen:
Verwandte Themen
Technologies