WebM.

WebM ist ein offener, lizenzfreier Container für Video im Web, den Google 2010 veröffentlicht hat — nach der Übernahme des Codec-Entwicklers On2 Technologies. Er nimmt die Videocodecs VP8, VP9 und AV1 sowie die Audiocodecs Opus und Vorbis auf. Der MIME-Typ lautet video/webm, die Dateiendung .webm.

Technisch ist WebM eine bewusst schlanke Variante des Matroska-Containers: nur die Codecs, die frei nutzbar sind, nur die Strukturen, die ein Browser fürs Streaming braucht. Wichtig ist die Unterscheidung zwischen Container und Codec — .webm ist die Verpackung, die Kompressionsleistung bringt der Codec darin. Wie WebM im Zusammenspiel mit AVIF und WebP ausgeliefert wird, steht im Überblick Bild- & Videoformate.

Wie beim Bild liefern wir auch beim Video mehrere Quellen in fester Reihenfolge aus. Im <video>-Element steht WebM als erste <source> mit type="video/webm", das MP4 mit H.264 als zweite. Der Browser prüft von oben nach unten und lädt genau eine Datei: aktuelle Geräte bekommen das kleinere WebM, ältere das MP4, das jedes Gerät seit Jahren in Hardware dekodiert und damit schonend für den Akku.

Für Hintergrund- und Teaser-Clips gilt bei uns ein festes Muster: autoplay muted playsinline loop. Stumm ist die Bedingung dafür, dass Browser das automatische Abspielen überhaupt erlauben, playsinline hält den Clip auf dem iPhone im Layout statt im Vollbild. Dazu immer ein poster-Bild als erster sichtbarer Frame — ausgeliefert als AVIF oder WebP über dieselbe Kette wie jedes andere Bild.

Geladen wird so wenig wie möglich: preload="metadata" für den sichtbaren Bereich, preload="none" für alles, was erst beim Scrollen erscheint — die Quelle setzt dann ein IntersectionObserver, wenn der Clip wirklich gebraucht wird. Die Dateien liegen auf unserer eigenen Auslieferung und gehen denselben Weg wie der Rest der Seite: über Git und GitHub Actions aufs Ziel. So bleiben Ladeverhalten, Caching-Regeln und Daten in deiner Hand — ein Punkt, der bei Datenschutz zählt und ganz nebenbei jede Anfrage an Dritte einspart. Längere Formate und ganze Mediatheken gehören dagegen in einen Streaming-Dienst, weil dort adaptives Streaming die Auslieferung übernimmt.

Lange war WebM das Format, das überall lief — außer bei Apple. Das hat sich erledigt: Safari auf dem Mac spielt WebM seit Version 16 ab, auf dem iPhone ist es flächendeckend seit iOS 17.4 dabei. Chrome, Firefox, Edge und Opera liefern es seit vielen Jahren. Nach den Zahlen von caniuse.com liegt die weltweite Abdeckung damit bei rund 96 %.

Die verbleibenden Prozent sind im Wesentlichen ältere iOS-Geräte ohne Update-Pfad — dazu kommen Randfälle wie VP9 mit ungewöhnlicher Farbunterabtastung, die Safari nicht in jeder Variante annimmt. Genau deshalb steht bei siteway_ nie ein WebM allein: Das MP4 mit H.264 als zweite Quelle kostet in der Auslieferung nichts, weil der Browser ohnehin nur eine Datei lädt — und es dekodiert auf praktisch jedem Gerät in Hardware, was auf Mobilgeräten Akku spart.

Bewegtbild ist der Ort, an dem Barrierefreiheit am schnellsten sichtbar wird. Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt bei uns über die Media-Query prefers-reduced-motion das poster-Bild statt der laufenden Schleife — dieselbe Aussage, ohne Bewegung. Automatisch startende Clips laufen grundsätzlich stumm, und alles, was länger als fünf Sekunden läuft, lässt sich anhalten. So verlangt es die WCAG in Erfolgskriterium 2.2.2.

Sobald Sprache im Spiel ist, kommt Text dazu: eine WebVTT-Datei über <track kind="captions"> für Untertitel, dazu ein Transkript im Seitentext — das hilft nicht nur beim Zuhören, sondern macht den Inhalt auch für Suchmaschinen und Sprachmodelle lesbar. Inhaltliche Videos bekommen sichtbare controls, damit sie sich mit der Tastatur bedienen lassen. Der ganze Rahmen dazu steht unter Barrierefreiheit im Stack.