Signatur
Beschreibung
Die Eigenschaft srclang des Interfaces HTMLTrackElement spiegelt das HTML-Attribut srclang eines <track>-Elements wider. Der Wert ist ein Sprach-Tag nach BCP 47, z. B. "de", "en" oder "pt-BR". Ist das Attribut nicht gesetzt, liefert die Eigenschaft den leeren String "".
Die Sprachangabe ist vor allem bei Spuren der Art kind="subtitles" wichtig: Laut HTML-Spezifikation muss dort srclang gesetzt sein. Browser nutzen den Wert, um Untertitel im Menü passend zu beschriften und um anhand der Nutzer-Spracheinstellung automatisch eine Spur auszuwählen.
Die Eigenschaft ist les- und schreibbar. Eine Zuweisung ändert das Attribut im DOM. Das zugehörige TextTrack-Objekt (track.track) stellt die Sprache über TextTrack.language bereit – nützlich, wenn du eigene Untertitel-Menüs baust oder Spuren programmatisch nach Sprache auswählen willst.
Rückgabewert
srclang-Attribut oder "", wenn das Attribut fehlt. Der Wert wird unverändert zurückgegeben, also weder geprüft noch normalisiert.Beispiele
Sprache einer vorhandenen Untertitelspur auslesen
// HTML: <video id="film"><track src="de.vtt" kind="subtitles" srclang="de" label="Deutsch"></video>
const track = document.querySelector('#film track');
console.log(track.srclang);
console.log(track.track.language);Untertitelspur dynamisch mit Sprache hinzufügen
const video = document.querySelector('video');
const track = document.createElement('track');
track.kind = 'subtitles';
track.src = '/untertitel/en.vtt';
track.srclang = 'en';
track.label = 'English';
video.append(track);
console.log(track.getAttribute('srclang'));Spur passend zur Browsersprache aktivieren
const video = document.querySelector('video');
const wunsch = navigator.language.split('-')[0]; // z. B. "de"
for (const el of video.querySelectorAll('track[kind="subtitles"]')) {
const passt = el.srclang.toLowerCase().startsWith(wunsch);
el.track.mode = passt ? 'showing' : 'disabled';
}
const aktiv = [...video.querySelectorAll('track')]
.find((el) => el.track.mode === 'showing');
console.log(aktiv?.srclang ?? 'keine passende Spur');Fehlendes Attribut erkennen
const track = document.createElement('track');
console.log(JSON.stringify(track.srclang));
console.log(track.srclang || 'Sprache unbekannt');// Wichtig · Fallstricke
- Keine Prüfung: Der Browser prüft nicht, ob der Wert ein gültiges BCP-47-Tag ist. Mit
track.srclang = 'deutsch'wird der Wert einfach übernommen. Wenn du Werte vergleichst, vorher normalisieren, z. B. mittoLowerCase()oderIntl.getCanonicalLocales(). - Pflicht bei Untertiteln: Bei
kind="subtitles"istsrclanglaut Spezifikation vorgeschrieben. Fehlt es, zeigen manche Browser die Spur ohne sinnvolle Beschriftung an oder wählen sie nicht automatisch aus. - Späte Änderungen: Wird
srclanggeändert, nachdem die Spur geladen wurde, übernehmen nicht alle Browser die Änderung zuverlässig inTextTrack.languageoder ins Untertitelmenü. Setze die Sprache am besten, bevor du das Element einfügst. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari), in Internet Explorer ab Version 10.