HTMLMediaElement: textTracks-Eigenschaft

Die schreibgeschützte textTracks-Eigenschaft von HTMLMediaElement-Objekten gibt ein TextTrackList-Objekt zurück, das alle TextTrack-Objekte auflistet, die die Textspuren des Medienelements darstellen, in der gleichen Reihenfolge wie in der Liste der Textspuren.

Sie können erkennen, wann Spuren zu einem <audio> oder <video>-Element hinzugefügt oder daraus entfernt werden, indem Sie die addtrack- und removetrack-Ereignisse verwenden. Diese Ereignisse werden jedoch nicht direkt an das Medienelement selbst gesendet. Stattdessen werden sie an das Spurlistenobjekt des HTMLMediaElement gesendet, das dem Typ der hinzugefügten Spur entspricht.

Die zurückgegebene Liste ist live; das bedeutet, dass sich der Inhalt der Liste dynamisch ändert, wenn Spuren zu dem Medienelement hinzugefügt oder aus diesem entfernt werden. Sobald Sie eine Referenz auf die Liste haben, können Sie diese überwachen, um Änderungen zu erkennen, wenn neue Textspuren hinzugefügt oder vorhandene entfernt werden.

Sehen Sie TextTrackList-Ereignisse, um mehr darüber zu erfahren, wie Sie Änderungen in der Spurliste eines Medienelements beobachten können.

Wert

Ein TextTrackList-Objekt, das die Liste der im Medienelement enthaltenen Textspuren repräsentiert. Auf die Liste der Spuren kann mit textTracks[n] zugegriffen werden, um die n-te Textspur aus der Objektliste der Textspuren zu erhalten, oder mit der Methode textTracks.getTrackById().

Jede Spur wird durch ein TextTrack-Objekt dargestellt, das Informationen über die Spur liefert.

Beispiele

Wir beginnen mit einem <video>, das mehrere <track>-Kinder hat.

html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
</video>

Das HTMLMediaElement.textTracks gibt ein textTracksList zurück, durch das wir iterieren können. Hier drucken wir alle Eigenschaften jeder englischen Spur auf die Konsole.

js
const tracks = document.querySelector("video").textTracks;

for (const track of tracks) {
  if (track.language === "en") {
    console.dir(track);
  }
}

Spezifikationen

Specification
HTML Standard
# dom-media-texttracks-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch