<track>: Das eingebettete Textspur-Element

Probieren Sie es aus

<video controls src="/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    src="/shared-assets/misc/friday.vtt" />
  Download the
  <a href="/shared-assets/videos/friday.mp4">MP4</a>
  video, and
  <a href="/shared-assets/misc/friday.vtt">subtitles</a>.
</video>

video {
  width: 250px;
}

video::cue {
  font-size: 1rem;
}

Attribute

Dieses Element beinhaltet die globalen Attribute.

default

Dieses Attribut gibt an, dass die Spur aktiviert sein soll, es sei denn, die Benutzereinstellungen deuten darauf hin, dass eine andere Spur angemessener ist. Dieses Attribut darf nur an einem track-Element pro Medienelement verwendet werden.

kind

Gibt an, wie die Textspur verwendet werden soll. Wenn dieses Attribut weggelassen wird, ist der Standardtyp subtitles. Wenn das Attribut einen ungültigen Wert enthält, wird metadata verwendet. Die folgenden Schlüsselwörter sind erlaubt:

subtitles

Untertitel bieten eine Transkription oder Übersetzung des Dialogs. Sie eignen sich, wenn der Ton verfügbar, aber nicht verständlich ist, wie bei Reden oder Text, der nicht Englisch ist, in einem englischsprachigen Film. Untertitel können zusätzliche Inhalte enthalten, in der Regel zusätzliche Hintergrundinformationen. Zum Beispiel der Text zu Beginn der Star-Wars-Filme oder das Datum, die Zeit und der Ort einer Szene. Die Informationen der Untertitel ergänzen die Audio- und Videoinhalte. Sie sind oft in das Video selbst eingebettet, können aber auch, insbesondere für Übersetzungen ganzer Filme, separat bereitgestellt werden.

captions

Geschlossene Untertitel bieten eine Transkription oder Übersetzung des Dialogs, der Geräuscheffekte, relevanter musikalischer Hinweise und anderer relevanter Audiinformationen, wie der Quelle des Hinweises (z.B. Charakter, Umgebung). Sie eignen sich, wenn der Ton nicht verfügbar oder nicht klar hörbar ist (z.B. weil er stummgeschaltet ist, durch Umgebungsgeräusche übertönt wird oder weil der Benutzer taub ist).

descriptions

Beschreibungen fassen die video Komponente der Medienressource zusammen. Sie sind dazu gedacht, als Audio synthetisiert zu werden, wenn die visuelle Komponente verdeckt, nicht verfügbar oder nicht nutzbar ist (z.B. weil der Benutzer die Anwendung ohne Bildschirm während der Fahrt nutzt oder weil der Benutzer blind ist).

chapters

Kapitelüberschriften sollen verwendet werden, wenn der Benutzer in der Medienressource navigiert.

metadata

Von Skripten verwendete Spuren. Nicht sichtbar für den Benutzer.

label

Ein von Menschen lesbarer Titel der Textspur, der von der Browser verwendet wird, wenn verfügbare Textspuren aufgelistet werden.

src

Adresse der Spur (.vtt-Datei). Muss eine gültige URL sein. Dieses Attribut muss angegeben werden und sein URL-Wert muss den gleichen Ursprung wie das Dokument haben — es sei denn, das übergeordnete <audio>- oder <video>-Element des track-Elements hat ein crossorigin-Attribut.

srclang

Sprache der Textspur-Daten. Es muss ein gültiges BCP 47 Sprach-Tag sein. Wenn das kind-Attribut auf subtitles gesetzt ist, muss srclang definiert sein.

Verwendungshinweise

Track-Datentypen

Der Datentyp, den track dem Medium hinzufügt, wird im kind-Attribut festgelegt, das die Werte subtitles, captions, chapters oder metadata annehmen kann. Das Element zeigt auf eine Quelldatei, die zeitgesteuerten Text enthält, den der Browser bereitstellt, wenn der Benutzer zusätzliche Daten anfordert.

Ein Medienelement kann nicht mehr als einen track mit den gleichen Attributen kind, srclang und label haben.

Erkennen von Cue-Änderungen

Der zugrunde liegende TextTrack, der durch die track-Eigenschaft angegeben wird, erhält ein cuechange-Ereignis jedes Mal, wenn der aktuell präsentierte Cue geändert wird. Dies geschieht auch, wenn die Spur nicht mit einem Medienelement verknüpft ist.

Wenn die Spur mit einem Medienelement verknüpft ist, indem das <track>-Element als Kind des <audio>- oder <video>-Elements verwendet wird, wird das cuechange-Ereignis auch an das HTMLTrackElement gesendet.

let textTrackElem = document.getElementById("text-track");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

Hinzufügen von Textspuren per Programmierung

Die JavaScript-Schnittstelle, die das <track>-Element darstellt, ist HTMLTrackElement. Die Textspur, die mit einem Element verknüpft ist, kann über die HTMLTrackElement.track-Eigenschaft abgerufen werden und ist vom Typ TextTrack.

TextTrack-Objekte können auch über die HTMLMediaElement.addTextTrack()-Methode zu einem HTMLVideoElement oder HTMLAudioElement-Element hinzugefügt werden. Die TextTrack-Objekte, die mit einem Medienelement verknüpft sind, werden in einer TextTrackList gespeichert und können über die HTMLMediaElement.textTracks-Eigenschaft abgerufen werden.

Beispiele

<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="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" />
  <!-- Fallback -->
  …
</video>

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• WebVTT-Textspur-Format
• HTMLMediaElement.textTracks