Signatur
Beschreibung
Die schreibgeschützte Eigenschaft selectedIndex einer VideoTrackList gibt an, welcher Videotrack eines Medienelements gerade abgespielt wird. Eine VideoTrackList erhältst du über HTMLMediaElement.videoTracks, meist von einem <video>-Element.
Im Gegensatz zu Audiotracks, von denen mehrere gleichzeitig aktiv sein können, ist immer höchstens ein Videotrack ausgewählt. Deshalb gibt es bei der VideoTrackList ein selectedIndex, bei der AudioTrackList dagegen nicht. Ist kein Track ausgewählt, zum Beispiel weil die Metadaten noch nicht geladen sind oder die Datei keine Videospur enthält, ist der Wert -1.
Einen anderen Track wählst du nicht über selectedIndex aus, sondern indem du VideoTrack.selected des gewünschten Tracks auf true setzt. Der zuvor gewählte Track wird dabei automatisch abgewählt, und die Liste löst das Ereignis change aus.
Rückgabewert
VideoTrack in der Liste oder -1, wenn kein Track ausgewählt ist.Beispiele
Aktuell ausgewählten Videotrack auslesen
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
const tracks = video.videoTracks;
if (!tracks) {
console.log('VideoTrackList wird nicht unterstützt');
return;
}
const index = tracks.selectedIndex;
if (index === -1) {
console.log('Kein Videotrack ausgewählt');
} else {
const track = tracks[index];
console.log(`Aktiver Track: ${index} – ${track.label || track.id} (${track.kind})`);
}
});Auf Trackwechsel reagieren
const video = document.querySelector('video');
const tracks = video.videoTracks;
tracks?.addEventListener('change', () => {
console.log('Neuer selectedIndex:', tracks.selectedIndex);
});
// Zweiten Track (z. B. Gebärdensprache) auswählen
if (tracks && tracks.length > 1) {
tracks[1].selected = true;
}Nächsten Blickwinkel per Button durchschalten
const video = document.querySelector('#multicam');
const button = document.querySelector('#next-angle');
button.addEventListener('click', () => {
const tracks = video.videoTracks;
if (!tracks || tracks.length === 0) return;
const current = tracks.selectedIndex;
const next = (current + 1) % tracks.length; // -1 wird zu 0
tracks[next].selected = true;
button.textContent = `Kamera ${next + 1} von ${tracks.length}`;
});// Wichtig · Fallstricke
- Browserunterstützung:
HTMLMediaElement.videoTracksund damitselectedIndexgibt es von Haus aus nur in Safari. In Chrome sind sie nur mit dem Flag „Experimental Web Platform features“ verfügbar, in Firefox nur mitmedia.track.enabled. Prüfe deshalb immer, ob die Eigenschaft existiert, etwa mitif (video.videoTracks)odervideo.videoTracks?.selectedIndex. - Schreibgeschützt: Eine Zuweisung wie
tracks.selectedIndex = 1bleibt wirkungslos und wirft im Strict Mode einenTypeError. Einen Track wählst du stattdessen mittracks[i].selected = trueaus. - Zeitpunkt: Bevor die Metadaten geladen sind, ist die Liste oft leer und der Wert
-1. Lies ihn daher erst nachloadedmetadataaus oder reagiere aufaddtrackbzw.change. - Viele Dateien und Streams enthalten nur eine Videospur. Mehrere Videotracks kommen vor allem in HLS-Streams mit mehreren Kamerawinkeln oder in Containern mit mehreren Spuren vor. Bei MSE-basierten Playern (z. B. hls.js, dash.js) werden die Tracks oft von der Bibliothek selbst verwaltet.