Codec-Auswahl

Dekodieren vs. Kodieren

Beim Dekodieren einer Video- oder Audiodatei bestimmt der Codec, wie die Datei ursprünglich kodiert wurde – Sie wählen ihn nicht aus. Demuxing-Bibliotheken wie Mediabunny und web-demuxer extrahieren den korrekten Codec-String für eine gegebene Datei, den Sie direkt an VideoDecoder oder AudioDecoder während der Konfiguration verwenden können.

Beim Kodieren wählen Sie den Codec. Der Rest dieses Leitfadens behandelt, wie man einen Codec auswählt.

Video-Codecs

Familien von Video-Codecs

Bevor Sie einen Codec-String wie vp09.00.40.08.00 oder avc1.4d0034 auswählen, lohnt es sich, die Codec-Familien zu überprüfen.

H.264 (AVC)

H.264 ist einer der am weitesten unterstützten Codecs in Browsern, Betriebssystemen und Verbrauchergeräten. Er ist der am häufigsten verwendete Codec in MP4-Dateien, und Anwendungen, die Videos für die Wiedergabe in Drittanbieter-Software kodieren, wählen in der Regel H.264 als pragmatische Wahl für maximale Kompatibilität.

Obwohl er beliebt ist, sollte beachtet werden, dass H.264 ein patentierter Codec ist. Während Browseranbieter Lizenzen halten, die die in WebCodecs verwendeten H.264-Encoder-Implementierungen abdecken, unterliegt der Codec in bestimmten Fällen Lizenzgebühren. Entwickler sollten die Nutzung mit rechtlichem Beistand überprüfen.

VP9

VP9 ist ein von Google entwickelter Open-Source-Codec und bietet bei gleicher Qualität eine bessere Kompression als H.264. VP9 in WebM-Containern wird von modernen Browsern weitgehend unterstützt, mit einer Abdeckung, die mit H.264 vergleichbar ist oder diese übersteigt.

VP9 in WebM-Containern wird auch von nativen Videoplayern auf Windows (Windows Media Player) und Drittanbieter-Playern wie VLC unterstützt, jedoch fehlt derzeit die native Wiedergabeunterstützung auf macOS und iOS.

VP9 wird manchmal, aber nicht immer, als Codec innerhalb von MP4-Dateien unterstützt, da die Unterstützung für diese Konfiguration von der Wiedergabesoftware abhängt.

VP9 wird oft für interne Anwendungsfälle aufgrund seiner besseren Komprimierung oder wenn Open-Source-Lizenzen wichtig sind, gewählt.

AV1

AV1 ist ein neuerer Open-Source-Codec, der von der Alliance for Open Media entwickelt wurde. AV1 bietet eine bessere Kompression als sowohl H.264 als auch VP9 bei gleicher Qualität, und die Dekodierungsunterstützung beträgt mittlerweile über 90 % weltweit in Browsern.

Die Codierunterstützung für AV1 ist in Desktop-Browsern stark, jedoch auf Safari und Android begrenzt. AV1 bietet eine bessere Qualität pro Bit als VP9, ist jedoch rechenintensiver zu kodieren. Verbrauchergeräte unterstützen zunehmend die AV1-Hardware-Beschleunigung, was die AV1-Kodierung praktischer machen kann. Die Entscheidung, AV1 über VP9 zu verwenden, hängt in der Regel davon ab, ob die bessere Qualität pro Bit die zusätzliche Kodierungsüberlast für einen bestimmten Anwendungsfall rechtfertigt.

HEVC (H.265)

HEVC bietet eine bessere Kompression als H.264, weist jedoch erhebliche Lücken in der browserseitigen Kodierungsunterstützung außerhalb der Apple-Plattformen auf. Es wird nicht als allgemeines Kodierungsziel empfohlen.

Wie H.264 ist HEVC ein patentierter Codec. Der Codec unterliegt in bestimmten Fällen Lizenzgebühren. Entwickler sollten die Nutzung mit rechtlichem Beistand überprüfen.

Kompatibilität von Codec und Container

Nicht alle Codecs werden von allen Containern unterstützt. Die folgende Tabelle behandelt die beiden häufigsten Web-Video-Container:

H.264 ist der Standard-Codec für MP4. VP9 und AV1 sind die Standard-Codecs für WebM. Obwohl VP9 und AV1 in einigen Umgebungen teilweise MP4-Unterstützung haben, ist die Koppelung mit WebM zuverlässiger.

Auswahl von Codec-Strings

Für jede Codec-Familie gibt es Hunderte von möglichen Codec-Strings.

Jeder Codec-String kodiert ein Profil und einen Level, die die Fähigkeiten und Kompatibilität des kodierten Streams bestimmen. Das Profil steuert, welche Kodierungsfunktionen aktiviert sind – niedrigere Profile wie Baseline sind einfacher und breiter kompatibel, während höhere Profile wie High eine bessere Kompression bei der Voraussetzung einer leistungsfähigeren Hardware ermöglichen. Der Level setzt die maximale Auflösung und Bitrate, die der Stream verwenden kann. Im Allgemeinen sollten niedrigere Profile und Level bevorzugt werden, es sei denn, Sie benötigen speziell die höhere Auflösung oder Kompressionseffizienz.

Die folgenden Tabellen bieten einen praktischen Ausgangspunkt für Codec-Strings mit Leveln und Profilen, die die Kodierungskompatibilität maximieren.

H.264

VP9

AV1

HEVC

Siehe die Codec-Unterstützungs-Tabelle für eine vollständige Liste potenzieller Codec-Strings und Unterstützung über Browser und Geräte hinweg.

Codec-String-Format

Der vollständig qualifizierte Codec-String kodiert die Codec-Familie, das Profil, den Level und andere Parameter, die beeinflussen, welche Hardware den Stream kodieren oder dekodieren kann und mit welcher Auflösung und Qualität.

Das Format für diese Codec-Strings wird im W3C Codecs-Register festgelegt, und das Format ist für jede Codec-Familie unterschiedlich.

H.264

avc1.4d0034

• avc1 — H.264/AVC-Codec-Identifikator
• 4d — Profil-IDC in Hexadezimal (4d = Main-Profil)
• 00 — Einschränkungsflaggen
• 34 — Level-IDC in Hexadezimal (34 = Level 5.2, unterstützt bis zu 4K)

VP9

vp09.00.40.08.00

• vp09 — VP9-Codec-Identifikator
• 00 — Profil
• 40 — Level (40 = Level 4.0, unterstützt bis zu 2K)
• 08 — Bit-Tiefe (8-Bit)
• 00 — Chroma-Subsampling

AV1

av01.0.05M.08

• av01 — AV1-Codec-Identifikator
• 0 — Profil (Main)
• 05M — Level und Tier (05 = Level 3.1, M = Main-Tier)
• 08 — Bit-Tiefe (8-Bit)

HEVC

hvc1.1.6.L150.B0

• hvc1 — HEVC-Codec-Identifikator (MP4/QuickTime-Variante)
• 1 — Profil (1 = Main-Profil)
• 6 — Kompatibilitätsflaggen
• L150 — Level × 30 (L150 = Level 5.0, unterstützt bis zu 4K)
• B0 — Tier- und Einschränkungsflaggen (B0 = Main-Tier)

Audio-Codecs

Opus

Opus ist ein Open-Source-Codec mit umfassender Codierungsunterstützung über Browser und Plattformen hinweg. Es ist der Standard-Audiocodec für WebM-Dateien und die empfohlene Wahl für die meisten WebCodecs-Audiokodierungs-Anwendungsfälle.

AAC

AAC ist der Standard-Audiocodec für MP4-Dateien und erforderlich, wenn eine MP4-Ausgabe angestrebt wird. Allerdings weist die AAC-Kodierungsunterstützung in WebCodecs bemerkenswerte Lücken auf: Sie wird in Firefox auf keiner Plattform und in keinem Browser auf Desktop-Linux unterstützt.

Die AAC-Kodierung wird universell in Safari-Versionen unterstützt, die AudioEncoder (Safari 26+) unterstützen, aber frühere Versionen von Safari unterstützen generell keine Audiokodierung.

MP3 und PCM

MP3 und PCM werden als Kodierungsziele nicht weitgehend unterstützt, wobei die MP3-Kodierung derzeit von keinem großen Browser unterstützt wird. PCM (unkomprimiertes Audio) ist als AudioData-Format für die Verarbeitung von Roh-Audio verfügbar, jedoch ist die Unterstützung für die Kodierung mit AudioEncoder begrenzt.

Referenz für Audio-Codec-Strings

Audio-Codec-Strings sind einfacher als Video-Codec-Strings. Opus erfordert keine zusätzlichen Parameter; AAC verwendet einen kurzen Parameter-String.

Die niedrigere AAC-Kodierungsunterstützung spiegelt die oben beschriebenen Plattformunterschiede wider — Firefox (alle Plattformen), Desktop-Linux (alle Browser) sowie partielle Unterstützung für AudioEncoder auf Apple-Geräten. AAC hat mehrere Varianten — mp4a.40.2 (AAC-LC) ist die Standardwahl für die Kodierung. mp4a.40.5 und mp4a.40.29 entsprechen HE-AAC-Konfigurationen, die Spektralbandreplikation (SBR) verwenden und dazu führen, dass der Decoder Audio mit doppelter konfigurierter Abtastrate ausgibt.

PCM ist in mehreren Varianten verfügbar: pcm-f32 (32-Bit-Float), pcm-s16 (16-Bit-Signed), pcm-s24 (24-Bit-Signed), pcm-s32 (32-Bit-Signed) und pcm-u8 (8-Bit-Unsigned). Alle Varianten haben eine äquivalente Browserunterstützung. Das pcm-f32-Format entspricht dem f32-planar-Layout, das von AudioData verwendet wird, und ist die praktischste Wahl für die Verarbeitung von Roh-Audio.

Verwenden Sie AudioEncoder.isConfigSupported(), um die Unterstützung zur Laufzeit zu überprüfen, bevor Sie einen AudioEncoder konfigurieren. Beachten Sie, dass AudioEncoder selbst nicht in allen Browsern verfügbar ist — überprüfen Sie mit typeof AudioEncoder !== "undefined", ob dieser vorhanden ist, bevor Sie isConfigSupported() aufrufen.

Häufige Anwendungsfälle

Sie müssen einen Video-Codec und einen Audio-Codec sowie das Containerformat zusammen als Paket auswählen. Für eine praktische Schnellstart-Anleitung hier einige häufige Konfigurationen:

• Ziel: Maximale Kompatibilität (Video, das für die Wiedergabe in Drittanbieter-Software oder auf einer breiten Palette von Geräten gedacht ist): H.264 (z. B. avc1.4d0034) + AAC (mp4a.40.2) in einem MP4-Container ist die häufigste Wahl in der Praxis.
• Open-Source-Projekte oder Anwendungen, die sowohl die Kodierung als auch die Wiedergabe steuern (z. B. interne Tools, In-App-Streaming): VP9 (z. B. vp09.00.40.08.00) + Opus (opus) in einem WebM-Container ist eine natürliche Kombination — beide sind Open-Source, und WebM ist der Standard-Container für diese Kombination.
• Maximale Kompression (z. B. großflächiges Streaming): AV1 + Opus in einem WebM-Container, sofern Ihre Zielgruppe ausreichende Hardwareunterstützung hat. Verwenden Sie VideoEncoder.isConfigSupported(), um dies zu überprüfen, bevor Sie sich für diese Kombination entscheiden.

Überprüfung der Unterstützung zur Laufzeit

Bevor Sie kodieren, verwenden Sie VideoEncoder.isConfigSupported(), um zu überprüfen, ob eine bestimmte Konfiguration auf dem aktuellen Gerät unterstützt wird:

const { supported } = await VideoEncoder.isConfigSupported({
  codec: "avc1.4d0034",
  width: 1920,
  height: 1080,
});

Da die Hardwareunterstützung je nach Gerät variiert, besteht ein gängiges Muster darin, Codec-Strings von höchster bis niedrigster Qualität zu testen und den ersten unterstützten zu verwenden:

const candidates = ["avc1.64003e", "avc1.4d0034", "avc1.42003e", "avc1.42001f"];
let codecString;

for (const codec of candidates) {
  const { supported } = await VideoEncoder.isConfigSupported({
    codec,
    width: 1920,
    height: 1080,
    bitrate: 5_000_000,
    framerate: 30,
  });
  if (supported) {
    codecString = codec;
    break;
  }
}

Dasselbe Muster gilt für VP9:

const candidates = [
  "vp09.00.61.08.00",
  "vp09.00.50.08.00",
  "vp09.00.40.08.00",
  "vp09.00.10.08.00",
];
let codecString;

for (const codec of candidates) {
  const { supported } = await VideoEncoder.isConfigSupported({
    codec,
    width: 1920,
    height: 1080,
    bitrate: 5_000_000,
    framerate: 30,
  });
  if (supported) {
    codecString = codec;
    break;
  }
}

Dasselbe Muster gilt für Audio. Da AudioEncoder nicht in allen Browsern verfügbar ist, überprüfen Sie vor dem Aufruf von isConfigSupported() die Existenz:

if (typeof AudioEncoder !== "undefined") {
  const { supported } = await AudioEncoder.isConfigSupported({
    codec: "opus",
    sampleRate: 48000,
    numberOfChannels: 2,
  });
}

Siehe auch

• WebCodecs-Unterstützungs-Dataset
• Konzepte zur Videoverarbeitung
• Verwendung der WebCodecs-API
• Codec-Unterstützungs-Tabelle auf WebCodecs Fundamentals
• VideoEncoder.isConfigSupported()
• VideoDecoder.isConfigSupported()
• AudioEncoder.isConfigSupported()
• AudioDecoder.isConfigSupported()