Signatur
Beschreibung
Die schreibgeschützte Eigenschaft sourceBuffer eines VideoTrack-Objekts verweist auf den SourceBuffer, aus dem die Spur stammt. Sie gehört zur Spezifikation der Media Source Extensions (MSE). Dort werden Mediendaten per JavaScript in einen SourceBuffer geschrieben. Enthalten die Daten ein Initialisierungssegment mit Videospuren, legt der Browser dafür VideoTrack-Objekte an und verknüpft sie mit dem erzeugenden Puffer.
Nützlich ist die Eigenschaft bei adaptivem Streaming (z. B. mit DASH oder HLS über MSE), wenn ein Player mehrere SourceBuffer verwaltet und wissen muss, welcher Puffer eine bestimmte Spur liefert. So lassen sich Spuren aus HTMLMediaElement.videoTracks dem richtigen Puffer zuordnen. Das hilft etwa, wenn man gezielt Daten nachladen, entfernen (SourceBuffer.remove()) oder den Puffer beim Qualitätswechsel austauschen will.
Der Wert ist null, wenn die Spur nicht von einem SourceBuffer erzeugt wurde, z. B. bei einer normalen Datei-URL im src-Attribut. Er ist ebenfalls null, sobald der SourceBuffer per MediaSource.removeSourceBuffer() aus MediaSource.sourceBuffers entfernt wurde.
Rückgabewert
SourceBuffer, der die Spur erzeugt hat, oder null, wenn die Spur nicht aus MSE stammt oder der Puffer aus der MediaSource entfernt wurde.Beispiele
Herkunft aller Videospuren prüfen
const video = document.querySelector('video');
if (!('videoTracks' in video)) {
console.warn('VideoTrackList wird von diesem Browser nicht unterstützt.');
} else {
for (const track of video.videoTracks) {
const herkunft = track.sourceBuffer
? 'SourceBuffer (MSE)'
: 'keine MSE-Quelle';
console.log(`Spur ${track.id || '(ohne ID)'}: ${herkunft}`);
}
}Spur einem SourceBuffer zuordnen (MSE)
const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', async () => {
const mime = 'video/mp4; codecs="avc1.42E01E"';
const sb = mediaSource.addSourceBuffer(mime);
// Initialisierungssegment laden und anhängen
const init = await (await fetch('/media/init.mp4')).arrayBuffer();
sb.appendBuffer(init);
sb.addEventListener('updateend', () => {
for (const track of video.videoTracks ?? []) {
console.log('Stammt aus diesem Puffer:', track.sourceBuffer === sb);
}
}, { once: true });
});null nach removeSourceBuffer()
// Annahme: mediaSource, sb und video wie im vorherigen Beispiel
const track = video.videoTracks[0];
console.log(track.sourceBuffer === sb); // true
mediaSource.removeSourceBuffer(sb);
console.log(track.sourceBuffer); // null// Wichtig · Fallstricke
- Browser-Kompatibilität:
VideoTrackundHTMLMediaElement.videoTrackswerden nur eingeschränkt unterstützt. Safari unterstützt sie. In Chrome/Edge sind sie nur über ein Flag für experimentelle Web-Plattform-Funktionen verfügbar, in Firefox nur über die Einstellungmedia.track.enabled. Vorher immer prüfen, ob die Funktion vorhanden ist ('videoTracks' in video). - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert bzw. wirft im Strict Mode einen
TypeError. - Spuren entstehen erst, nachdem ein Initialisierungssegment verarbeitet wurde. Direkt nach
addSourceBuffer()ist die Spurliste noch leer. Also aufupdateendoder dasaddtrack-Ereignis derVideoTrackListwarten. - Referenzen immer auf
nullprüfen, bevor man Methoden des Puffers aufruft. Der Puffer kann jederzeit aus derMediaSourceentfernt werden. - In Dedicated Workers (MSE-in-Workers) ist die Zuordnung zu Spuren im Hauptthread nicht direkt verfügbar.