Signatur
Beschreibung
Die Eigenschaft kind eines VideoTrack-Objekts sagt, welche Rolle eine Videospur innerhalb einer Mediendatei hat. Der Browser liest diese Information aus den Metadaten des Containerformats (etwa der Rollenangabe in MPEG-DASH, in MP4/fragmented MP4, Ogg Skeleton oder WebM) und bildet sie auf einen festen Satz von Werten ab.
Mögliche Werte laut HTML-Spezifikation:
"main": die primäre Videospur"alternative": eine alternative Fassung der Hauptspur, z. B. ein anderer Kamerawinkel"captions": Hauptvideo mit eingebrannten Untertiteln für Hörgeschädigte"subtitles": Hauptvideo mit eingebrannten Untertiteln (Übersetzung)"sign": Gebärdensprach-Einblendung"commentary": Kommentarspur, z. B. Regiekommentar mit Bild""(leerer String): Rolle unbekannt oder nicht angegeben
Mit kind kannst du in einem eigenen Player automatisch passende Spuren auswählen, etwa die Gebärdensprach-Version, wenn der Nutzer das in seinen Barrierefreiheits-Einstellungen gewählt hat. Die aktive Spur wechselst du über VideoTrack.selected. Es ist immer nur eine Videospur gleichzeitig ausgewählt.
Rückgabewert
"alternative", "captions", "main", "sign", "subtitles", "commentary" oder "". Die Eigenschaft ist nur lesbar.Beispiele
Alle Videospuren mit ihrer Kategorie auflisten
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
if (!video.videoTracks) {
console.warn('VideoTrackList wird nicht unterstützt');
return;
}
for (const track of video.videoTracks) {
console.log(`${track.id || '(ohne ID)'}: kind="${track.kind}", label="${track.label}"`);
}
});Gebärdensprach-Spur automatisch auswählen
const selectTrackByKind = (videoEl, wantedKind) => {
const tracks = videoEl.videoTracks;
if (!tracks) return false;
const match = Array.from(tracks).find((t) => t.kind === wantedKind);
if (!match) return false;
// Setzt man selected auf true, wird die bisherige Spur automatisch abgewählt
match.selected = true;
return true;
};
const video = document.querySelector('#player');
video.addEventListener('loadedmetadata', () => {
const ok = selectTrackByKind(video, 'sign');
console.log(ok ? 'Gebärdensprache aktiv' : 'Keine Gebärdensprach-Spur vorhanden');
});Auswahlmenü mit lesbaren Bezeichnungen aufbauen
const KIND_LABELS = {
main: 'Hauptvideo',
alternative: 'Alternative Ansicht',
captions: 'Mit Untertiteln (Hörgeschädigte)',
subtitles: 'Mit Untertiteln',
sign: 'Gebärdensprache',
commentary: 'Kommentar',
'': 'Unbekannt'
};
const video = document.querySelector('video');
const select = document.querySelector('#track-select');
video.addEventListener('loadedmetadata', () => {
const tracks = video.videoTracks ?? [];
select.replaceChildren(
...Array.from(tracks, (t, i) => new Option(
t.label || KIND_LABELS[t.kind] || t.kind,
String(i),
false,
t.selected
))
);
});
select.addEventListener('change', () => {
video.videoTracks[Number(select.value)].selected = true;
});// Wichtig · Fallstricke
Browser-Unterstützung: HTMLMediaElement.videoTracks und damit VideoTrack.kind gibt es standardmäßig nur in Safari. In Chrome musst du die Option „Experimental Web Platform features“ aktivieren, in Firefox die Einstellung media.track.enabled. Prüfe deshalb vorher mit if (video.videoTracks), ob die API vorhanden ist.
- Die Eigenschaft ist nur lesbar. Wenn du ihr etwas zuweist, passiert ohne Strict Mode einfach nichts, im Strict Mode gibt es einen
TypeError. - Ob überhaupt ein sinnvoller Wert kommt, hängt davon ab, ob der Container die Rolle mitliefert. Bei einfachen MP4-Dateien mit nur einer Spur steht oft
"main"oder""drin. Rechne immer mit dem leeren String. - Greif erst nach
loadedmetadataauf die Spuren zu. Vorher kann dieVideoTrackListnoch leer sein. - Bei Streams über Media Source Extensions (z. B. hls.js oder dash.js) verwalten die Bibliotheken die Spuren oft selbst.
videoTracksgibt dann eventuell nicht alle Varianten wieder. - Untertitel als Text (WebVTT) sind keine
VideoTracks. Die findest du überTextTrack.kind.