MediaSource.isTypeSupported() — Methode · JavaScript-Referenz

Signatur

MediaSource.isTypeSupported(type)

Beschreibung

MediaSource.isTypeSupported() ist eine statische Methode der Media Source Extensions (MSE). Mit ihr prüft man vor dem Anlegen eines SourceBuffer, ob der Browser ein bestimmtes Container-Format mit bestimmten Codecs verarbeiten kann. Das ist die Grundlage für adaptives Streaming (DASH, HLS über MSE), wie es Player wie dash.js, hls.js oder Shaka Player verwenden.

Der Parameter ist ein MIME-Typ-String, der den Codec-Parameter enthalten kann, z. B. 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'. Liefert die Methode true, sollte ein anschließender Aufruf von mediaSource.addSourceBuffer(type) klappen, garantiert ist das aber nicht. Bei false wird addSourceBuffer() mit dem gleichen Typ sicher eine NotSupportedError-Ausnahme werfen.

Typischerweise prüft man damit eine Liste möglicher Formate (z. B. AV1, VP9, H.264) und nimmt das beste, das unterstützt wird. Anders als HTMLMediaElement.canPlayType(), das "probably", "maybe" oder "" liefert, gibt isTypeSupported() einen einfachen booleschen Wert zurück und bezieht sich ausschließlich auf die Wiedergabe über MSE, nicht auf die normale Wiedergabe per src-Attribut.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		MIME-Typ des Mediencontainers, optional mit `codecs`-Parameter, z. B. `'video/webm; codecs="vp9, opus"'` oder `'audio/mp4; codecs="mp4a.40.2"'`.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Browser den Typ wahrscheinlich über MSE abspielen kann, sonst false. Auch bei leerem oder fehlerhaftem String kommt false zurück.

Beispiele

Einfache Prüfung einzelner Formate

const types = [
  'video/webm; codecs="vp9, opus"',
  'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
  'video/mp4; codecs="av01.0.05M.08"',
  'video/x-unbekannt'
];

for (const type of types) {
  console.log(`${type}: ${MediaSource.isTypeSupported(type)}`);
}

video/webm; codecs="vp9, opus": true video/mp4; codecs="avc1.42E01E, mp4a.40.2": true video/mp4; codecs="av01.0.05M.08": true video/x-unbekannt: false (Ergebnis hängt von Browser und Gerät ab)

Bestes unterstütztes Format für den Stream auswählen

// Nach Priorität sortiert: effizientester Codec zuerst
const candidates = [
  { label: 'AV1',   type: 'video/mp4; codecs="av01.0.08M.08"', url: '/video/av1/init.mp4' },
  { label: 'VP9',   type: 'video/webm; codecs="vp09.00.40.08"', url: '/video/vp9/init.webm' },
  { label: 'H.264', type: 'video/mp4; codecs="avc1.640028"',   url: '/video/h264/init.mp4' }
];

const pickFormat = () => {
  if (!('MediaSource' in window)) return null;
  return candidates.find(({ type }) => MediaSource.isTypeSupported(type)) ?? null;
};

const format = pickFormat();
console.log(format ? `Verwende ${format.label}` : 'Kein unterstütztes Format gefunden');

Verwende AV1 (bzw. VP9/H.264 je nach Browser)

Prüfen vor addSourceBuffer()

const video = document.querySelector('video');
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

const MS = window.ManagedMediaSource ?? window.MediaSource;

if (MS && MS.isTypeSupported(mimeCodec)) {
  const mediaSource = new MS();
  video.disableRemotePlayback = true; // für ManagedMediaSource auf iOS nötig
  video.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', async () => {
    const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    const response = await fetch('/media/segment.mp4');
    sourceBuffer.addEventListener('updateend', () => mediaSource.endOfStream(), { once: true });
    sourceBuffer.appendBuffer(await response.arrayBuffer());
  });
} else {
  console.error('MIME-Typ oder Codec wird nicht unterstützt:', mimeCodec);
}

// Wichtig · Fallstricke

Nur „wahrscheinlich“: true garantiert keine fehlerfreie Wiedergabe. Auflösung, Bitrate, Profil/Level oder Hardware-Decoder können trotzdem Probleme machen. Für verlässlichere Aussagen, auch zu Effizienz und Energieverbrauch, gibt es navigator.mediaCapabilities.decodingInfo().
Codec-Strings genau angeben: Ohne codecs-Parameter antworten manche Browser zu optimistisch, andere mit false. Ein ungenauer String wie codecs="avc1" statt avc1.42E01E kann zu false führen.
Statische Methode: Aufruf über MediaSource.isTypeSupported(), nicht auf einer Instanz.
Kompatibilität: Wird von allen modernen Desktop-Browsern und Android unterstützt. Auf dem iPhone gab es lange kein MSE; ab iOS 17.1 steht ManagedMediaSource mit derselben statischen Methode bereit. Vorher per 'MediaSource' in window auf Unterstützung prüfen.
Fingerprinting: Die Ergebnisse verraten Details über das Gerät. Manche Browser liefern im Privatmodus oder mit Tracking-Schutz daher vereinfachte Antworten.
In Dedicated Workers gibt es die Methode nur, wenn MSE-in-Workers unterstützt wird (Chrome 108+).

Siehe auch

MediaSource.clearLiveSeekableRange() MediaSource.endOfStream() MediaSource.addSourceBuffer() MediaSource.removeSourceBuffer() MediaSource.setLiveSeekableRange()