Signatur
Beschreibung
Mit navigator.mediaCapabilities.decodingInfo() fragt man den Browser, ob er Audio- oder Videodaten in einem bestimmten Format decodieren kann, bevor man sie lädt. Die Methode liefert ein Promise. Es wird mit einem Objekt erfüllt, das drei boolesche Angaben enthält: supported (wird das Format überhaupt unterstützt?), smooth (läuft die Wiedergabe ohne verlorene Frames?) und powerEfficient (wird z. B. Hardware-Decodierung genutzt, die den Akku schont?).
Die Methode ist deutlich genauer als HTMLMediaElement.canPlayType() oder MediaSource.isTypeSupported(). Diese beiden liefern nur ein vages „maybe“ oder „probably“. decodingInfo() berücksichtigt dagegen Auflösung, Bitrate, Bildrate und seit neuerer Zeit auch HDR-Eigenschaften und verschlüsselte Inhalte (EME). Für adaptives Streaming (DASH/HLS mit MSE) lässt sich damit gezielt die beste Qualitätsstufe auswählen, die auf dem Gerät noch flüssig und effizient läuft.
Typischer Ablauf: Man baut für jede verfügbare Variante (Codec, Auflösung, Bitrate) ein Konfigurationsobjekt, ruft für alle Varianten parallel decodingInfo() auf und filtert die Ergebnisse. Bevorzugt werden Varianten mit smooth und powerEfficient.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $configuration Pflicht | MediaDecodingConfiguration | Beschreibt die zu prüfenden Medien. Das Objekt muss type und mindestens eine der Eigenschaften video oder audio enthalten. |
|
| $configuration.type Pflicht | "file" | "media-source" | "webrtc" | Art der Wiedergabe: "file" für einfache Dateien über <video src>, "media-source" für MSE-Streams und "webrtc" für Echtzeitverbindungen per RTCPeerConnection. |
|
| $configuration.video | VideoConfiguration | Videoangaben: contentType (z. B. 'video/mp4; codecs="avc1.640028"'), width, height, bitrate (bit/s), framerate sind Pflicht. Optional sind hdrMetadataType, colorGamut, transferFunction und scalabilityMode. |
|
| $configuration.audio | AudioConfiguration | Audioangaben: contentType ist Pflicht. Optional sind channels (String, z. B. "2" oder "5.1"), bitrate, samplerate und spatialRendering. |
|
| $configuration.keySystemConfiguration | MediaCapabilitiesKeySystemConfiguration | Optional, für verschlüsselte Inhalte (EME): keySystem (z. B. "com.widevine.alpha") sowie Angaben zu Robustheit, initDataType, persistentState usw. |
Rückgabewert
supported, smooth und powerEfficient (jeweils boolean). Bei EME-Abfragen kommt zusätzlich keySystemAccess hinzu (MediaKeySystemAccess oder null). Ist supported gleich false, sind auch die beiden anderen Werte false. Ist die Konfiguration ungültig, wird das Promise mit einem TypeError abgelehnt.Beispiele
Einfache Prüfung einer MP4-Datei (H.264, 1080p)
const config = {
type: 'file',
video: {
contentType: 'video/mp4; codecs="avc1.640028"',
width: 1920,
height: 1080,
bitrate: 5_000_000, // 5 Mbit/s
framerate: 30
},
audio: {
contentType: 'audio/mp4; codecs="mp4a.40.2"',
channels: '2',
bitrate: 128_000,
samplerate: 48000
}
};
const info = await navigator.mediaCapabilities.decodingInfo(config);
console.log(`unterstützt: ${info.supported}, flüssig: ${info.smooth}, effizient: ${info.powerEfficient}`);Beste Streaming-Variante für MSE auswählen
const variants = [
{ codec: 'video/webm; codecs="av01.0.08M.08"', width: 3840, height: 2160, bitrate: 16_000_000 },
{ codec: 'video/webm; codecs="vp09.00.40.08"', width: 1920, height: 1080, bitrate: 6_000_000 },
{ codec: 'video/mp4; codecs="avc1.4d401f"', width: 1280, height: 720, bitrate: 3_000_000 }
];
const pickVariant = async () => {
if (!('mediaCapabilities' in navigator)) return variants.at(-1);
const results = await Promise.all(
variants.map(async (v) => ({
variant: v,
info: await navigator.mediaCapabilities.decodingInfo({
type: 'media-source',
video: { contentType: v.codec, width: v.width, height: v.height, bitrate: v.bitrate, framerate: 30 }
})
}))
);
// Zuerst flüssig + effizient, sonst nur flüssig, sonst nur unterstützt
const best =
results.find(r => r.info.smooth && r.info.powerEfficient) ??
results.find(r => r.info.smooth) ??
results.find(r => r.info.supported);
return best?.variant ?? null;
};
console.log(await pickVariant());HDR-Unterstützung prüfen
const checkHdr = async () => {
try {
const info = await navigator.mediaCapabilities.decodingInfo({
type: 'media-source',
video: {
contentType: 'video/mp4; codecs="hvc1.2.4.L153.B0"',
width: 3840,
height: 2160,
bitrate: 20_000_000,
framerate: 24,
hdrMetadataType: 'smpteSt2086',
colorGamut: 'rec2020',
transferFunction: 'pq'
}
});
return info.supported;
} catch (err) {
// TypeError bei ungültiger Konfiguration (z. B. fehlende Pflichtfelder)
console.warn('Ungültige Konfiguration:', err.message);
return false;
}
};
console.log('HDR10 möglich:', await checkHdr());Verschlüsselte Inhalte (EME/Widevine) prüfen
const info = await navigator.mediaCapabilities.decodingInfo({
type: 'media-source',
video: {
contentType: 'video/mp4; codecs="avc1.640028"',
width: 1920, height: 1080, bitrate: 5_000_000, framerate: 30
},
keySystemConfiguration: {
keySystem: 'com.widevine.alpha',
initDataType: 'cenc',
video: { robustness: 'SW_SECURE_DECODE' }
}
});
if (info.supported && info.keySystemAccess) {
const mediaKeys = await info.keySystemAccess.createMediaKeys();
await document.querySelector('video').setMediaKeys(mediaKeys);
console.log('DRM bereit');
}