HTMLSourceElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSourceElement.type

Beschreibung

Die Eigenschaft type des Interfaces HTMLSourceElement ist ein String, der den MIME-Typ der verknüpften Ressource angibt, z. B. "video/webm", "audio/mpeg" oder "image/avif". Sie spiegelt das gleichnamige HTML-Attribut direkt wider. Beim Lesen wird dessen Wert geliefert, beim Schreiben wird das Attribut gesetzt.

Der Browser wertet type vor dem Herunterladen aus. Innerhalb von <video>, <audio> oder <picture> werden <source>-Elemente übersprungen, deren Typ der Browser nicht unterstützt. So spart man unnötige Netzwerkanfragen und stellt Fallback-Formate zuverlässig bereit.

Der Wert darf zusätzlich den Parameter codecs enthalten, z. B. 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'. Damit kann der Browser genauer entscheiden, ob er die Datei abspielen kann. Fehlt das Attribut, ist der Rückgabewert ein leerer String. Der Browser muss die Ressource dann erst anfordern, um ihr Format zu bestimmen.

Rückgabewert

Typ

string

Beschreibung

Der MIME-Typ aus dem type-Attribut, gegebenenfalls mit codecs-Parameter. Ein leerer String "", wenn das Attribut fehlt. Beim Schreiben wird ein beliebiger String akzeptiert.

Beispiele

MIME-Typen aller Quellen eines Videos auslesen

// HTML:
// <video id="clip" controls>
//   <source src="clip.webm" type="video/webm">
//   <source src="clip.mp4" type="video/mp4">
// </video>
const video = document.getElementById('clip');
const types = [...video.querySelectorAll('source')].map((s) => s.type);
console.log(types);

["video/webm", "video/mp4"]

Quelle dynamisch mit passendem Typ erzeugen

const audio = document.createElement('audio');
audio.controls = true;

const formats = [
  { src: 'podcast.opus', type: 'audio/ogg; codecs="opus"' },
  { src: 'podcast.mp3', type: 'audio/mpeg' }
];

for (const { src, type } of formats) {
  const source = document.createElement('source');
  source.src = src;
  source.type = type; // setzt das type-Attribut
  audio.append(source);
}

document.body.append(audio);
console.log(audio.innerHTML);

Unterstützte Formate vorab mit canPlayType() prüfen

const video = document.querySelector('video');

for (const source of video.querySelectorAll('source')) {
  const support = video.canPlayType(source.type);
  console.log(`${source.type || '(kein Typ)'}: ${support || 'nein'}`);
}

video/webm: maybe video/mp4: maybe

Bildformat-Fallback in <picture>

// <picture>
//   <source srcset="hero.avif" type="image/avif">
//   <source srcset="hero.webp" type="image/webp">
//   <img src="hero.jpg" alt="Titelbild">
// </picture>
const img = document.querySelector('picture img');
img.addEventListener('load', () => {
  console.log('Geladen:', img.currentSrc);
});

Geladen: https://example.com/hero.avif

// Wichtig · Fallstricke

Keine Prüfung: Der zugewiesene Wert wird weder geprüft noch normalisiert. Ein Tippfehler wie "video/mp" führt dazu, dass der Browser die Quelle stillschweigend überspringt.
Nachträgliches Ändern: Wenn Sie type oder src eines bereits eingefügten <source>-Elements ändern, lädt der Browser das Medium nicht automatisch neu. Rufen Sie dafür am übergeordneten Element load() auf.
Echter Typ entscheidet: type ist nur ein Hinweis. Entscheidend ist, welches Format die Datei tatsächlich hat und welchen Content-Type der Server sendet. Ein falscher Hinweis kann dazu führen, dass eine abspielbare Quelle übersprungen wird.
Anführungszeichen bei Codecs: Die Codec-Liste im codecs-Parameter muss in doppelten Anführungszeichen stehen. Setzen Sie den ganzen String deshalb in einfache Anführungszeichen oder Template-Literale.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Im Kontext von <picture> ist sie seit etwa 2015 verfügbar (Chrome 38, Firefox 38, Safari 9.1).

Siehe auch

HTMLObjectElement.name HTMLSourceElement.sizes HTMLSourceElement.src HTMLSourceElement.media HTMLSourceElement.srcset