WebM- und MP4-Videoloops für Websites optimieren

Kurz als Merkhilfe für mich selbst, vielleicht aber auch für andere nützlich: Wenn ich kurze Videoloops auf einer Website einsetze, kodiere ich aus der Quelldatei in der Regel drei Versionen, damit das Ganze möglichst kompatibel zu vielen Browsern bleibt (wie auch hier kurz beschrieben): MP4 (AVC/H.264), OGV und WebM.

Doch selbst wenn man im Editor die Schnittstelle ideal setzt und der Loop, der nur aus einer Einstellung besteht, an sich absolut flüssig und ohne verräterischen Ruckler läuft, heißt das noch nicht, dass das auch für die aus dem Rohclip kodierte Webversion gilt. Gerade bei WebM kann es mit falschen Einstellungen zu deutlichen Blockartefakten kommen, die am Ende des Videoclips so stark sind, dass es sofort auffällt, wenn der Loop relativ artefaktfrei wieder von vorn anfängt.

Für WebM kann ich nach ausgiebiger Suche und reichlich Testerei folgende Settings mit dem Kommandozeilen-Tool ffmpeg empfehlen:

ffmpeg -i quelldatei.mov -framerate 25 -c:v libvpx-vp9 -b:v 0 -pix_fmt yuv420p -crf 40 -cpu-used 1 -tile-columns 2 -threads 8 -row-mt 1 -vf scale=850:478 zieldatei.webm

Fundstelle: .webm blocky in initial frames, terrible for looping :(

Aus einer ursprünglichen Beispiel-Quelldatei (Full HD, 6 Sekunden, Apple ProRes, keine Tonspuren) mit einer Größe von ca. 29 Megabyte wird der Clip mit den obigen Settings und dem VP9-Codec auf 210 Kilobyte reduziert. Die finale WebM-Videodatei hat eine Größe von 850 x 478 Pixel (16:9), bei der an keiner Stelle die für Loops problematischen Blockartefakte auftreten:

Vermutlich wird dieses WebM-Beispielvideo auf vielen mobilen Endgeräten nicht angezeigt.

Die einzelnen Parameter werden hier recht anschaulich erklärt. Ein Constant Rate Factor (CRF) von 40 scheint mir ein guter Kompromiss zwischen Qualität und tolerabler Größe zu sein. Kleinere Faktoren ergeben eine bessere Qualität, dafür aber größere Dateien. Ein CRF-Maximalwert von 63 würde das Video auf 34 Kilobyte quetschen, aber die visuelle Qualität wäre indiskutabel. Oder Kunst.

Für die MP4-Version nutze ich in der Regel ffmpeg mit diesen Parametern:

ffmpeg -i quelldatei.mov -vcodec h264 -vb 400k -pix_fmt yuv420p -vf scale=850:478 zieldatei.mp4

Vermutlich wird dieses MP4-Beispielvideo auf vielen mobilen Endgeräten nicht angezeigt.

Wegen der gewählten Bitrate von 400 KBit/s ist die MP4-Variante mit 222 Kilobytes von vergleichbarer Qualität. Bei Bildern ohne komplexe Hintergründe und mit wenig Bewegung reichen 200 KBit/s völlig aus.

Schreibe einen Kommentar

Bitte bleib beim Thema. Ich lege großen Wert auf einen freundlichen und sachlichen Umgangston. Persönliche Angriffe und Beleidigungen werden gelöscht. Gleiches gilt für Beiträge, die erkennbar nur verfasst wurden, um einen Link auf das eigene Angebot zu setzen.

Kommentare werden moderiert. Bis zur Freischaltung kann es gelegentlich etwas dauern.

Wenn du hier nicht unter deinem richtigen Namen in Erscheinung treten möchtest, dann ist das völlig in Ordnung. Gern kannst du einen Link auf dein Blog bzw. deine Website hinterlassen.

Und bitte schau dir vor dem Absenden eines Kommentars meine Hinweise zum Datenschutz an.