5 Tipps für die Einbindung von Videos auf Websites

Codecs, Framerate, Fallback und Co – Jan Henckel gibt Tipps für die Einbindung von Videos in Websites:

1 Codec auswählen
Das Format MPEG-4/H.264 unterstützen die meisten aktuellen Browser – daher ist es unser Favorit. Nach Möglichkeit sollte man dem Browser aber auch modernere Containerformate wie das zukunftsträchtige, von Google entwickelte Open-Source-Format WebM zur Verfügung stellen, das auf dem Matroska Media Container basiert und trotz kleinerer Dateigrößen eine bessere Videoqualität bietet, was die Datenlast für mobile Devices verringert. Damit ist es fürs Onlinestreaming geradezu prädestiniert.

2 Auflösung responsiv anpassen
Neben dem Quotienten aus bestmöglicher Qualität und geringstmöglicher Datenlast hängt die richtige Auflösung von weiteren Faktoren ab: Wird das Video full-screen gezeigt oder nur in einem kleinen Frame? Wird es zusätzlich verfremdet, beispielsweise mittels Blur-Effekt? Bei viel Bewegung oder vielen Details wird auch ein höher aufgelöstes Video schnell pixelig. Meist bieten 1280 mal 720 Pixel einen guten Kompromiss. Ebenso gilt es, die Bitrate für das Videomaterial aus­zu­tarieren. Hier liegt der Mittelweg in der Regel bei einer variablen Bitrate zwischen 3 und 8 Megabit pro Sekunde.

3 Framerate definieren
25 bis 30 oder auch 60 Frames pro Sekunde sind je nachdem, ob viel oder wenig Bewegung im Video statt­findet, die ideale Wahl, damit ein Clip flüssig läuft.

4 Fallback-Lösung anlegen
Legen Sie auch ein Vorschaubild an, damit bereits Content angezeigt wird, während das Video lädt. Dieses Bild dient auch als Fallback-Lösung für den Fall, dass der Browser das Video nicht anzeigt.

5 Sonderfall iOS berücksichtigen
Auf mobilen Devices sind Hintergrundvideos immer eine Herausforderung – und dies insbesondere bei Apple-Devices. Zwar ist Inline Video Playback seit iOS 10 möglich, sodass man Clips seither auch auf iPhones im Browserfenster anschauen kann. Doch ist Autoplay nur für Videos ohne Tonspur oder mit dem HTML-Attribut <muted> möglich. Umso wichtiger ist es, dass Sie an die Fallback-Lösung in Punkt vier denken.

Mehr zum Thema: Hero-Videos

Zum Autor: Jan Henckel, Technischer Leiter bei Dunckelfeld in Köln, wundert sich, dass sich WebM noch nicht flächendeckend als Videocontainer durchgesetzt hat – technisch State of the Art und sogar kostenfrei, weil Open Source.