<track>: Das Textspurelement für Einbettungen

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <track>-HTML Element wird als Kind der Medienelemente, <audio> und <video>, verwendet. Jedes Track-Element ermöglicht es Ihnen, eine zeitgesteuerte Textspur (oder zeitbasierte Daten) anzugeben, die parallel zum Medienelement angezeigt werden kann, zum Beispiel um Untertitel oder geschlossene Untertitel auf einem Video zu überlagern oder neben Audiotracks anzuzeigen.

Für ein Medienelement können mehrere Spuren angegeben werden, die verschiedene Arten von zeitgesteuerten Textdaten enthalten oder zeitgesteuerte Textdaten, die für verschiedene Sprachausgaben übersetzt wurden. Die verwendeten Daten sind entweder die Spur, die als Standard festgelegt wurde, oder eine Art und Übersetzung basierend auf den Benutzereinstellungen.

Die Spuren sind im WebVTT-Format (.vtt Dateien) formatiert — Web Video Text Tracks.

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 umfasst die globalen Attribute.

default

Dieses Attribut zeigt an, dass die Spur aktiviert werden sollte, es sei denn, die Benutzereinstellungen geben an, dass eine andere Spur geeigneter ist. Dies darf nur auf einem track-Element pro Medienelement verwendet werden.

kind

Wie die Textspur verwendet werden soll. Wird es weggelassen, ist die Standardart subtitles. Wenn das Attribut einen ungültigen Wert enthält, wird metadata verwendet. Die folgenden Schlüsselwörter sind erlaubt:

  • subtitles

    • Untertitel bieten eine Übersetzung von Inhalten, die der Betrachter nicht verstehen kann. Zum Beispiel Sprache oder Text, der nicht Englisch in einem englischsprachigen Film ist.
    • 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 Uhrzeit und der Ort einer Szene.
  • captions

    • Geschlossene Untertitel bieten eine Transkription und möglicherweise eine Übersetzung von Audio.
    • Sie können wichtige nonverbale Informationen wie Musikhinweise oder Soundeffekte enthalten. Sie können die Quelle des Hinweises angeben (z.B. Musik, Text, Charakter).
    • Geeignet für Benutzer, die gehörlos sind oder wenn der Ton stummgeschaltet ist.
  • chapters

    • Kapitelüberschriften sollen verwendet werden, wenn der Benutzer die Medienressource durchsucht.
  • metadata

    • Spuren, die von Skripten verwendet werden. Nicht für den Benutzer sichtbar.
label

Ein benutzerlesbarer Titel der Textspur, der vom 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 denselben Ursprung wie das Dokument haben — es sei denn, das <audio> oder <video> Elternelement 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 Typ der Daten, die track dem Medium hinzufügt, wird im kind-Attribut festgelegt, welches Werte wie subtitles, captions, chapters oder metadata annehmen kann. Das Element verweist auf eine Quelldatei, die zeitgesteuerten Text enthält, den der Browser anzeigt, wenn der Benutzer zusätzliche Daten anfordert.

Ein Medienelement kann nicht mehr als eine track mit demselben kind, srclang und label haben.

Erkennen von Cue-Änderungen

Das zugrunde liegende TextTrack, das durch die track Eigenschaft angezeigt wird, erhält jedes Mal ein cuechange Ereignis, wenn das derzeit präsentierte Cue geändert wird. Dies geschieht auch, wenn die Spur nicht mit einem Medienelement verbunden ist.

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

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

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

Textelemente programmatisch hinzufügen

Das JavaScript-Interface, das das <track>-Element repräsentiert, ist HTMLTrackElement. Die mit einem Element verknüpfte Textspur kann aus der HTMLTrackElement.track Eigenschaft abgerufen werden und ist vom Typ TextTrack.

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

Beispiele

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="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

Inhaltskategorien Keine
Erlaubter Inhalt Keine; es ist ein void element.
Tag-Auslassung Muss ein Start-Tag haben und darf kein End-Tag haben.
Erlaubte Eltern

Ein Medienelement, <audio> oder <video>.

Implizite ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLTrackElement`](/de/docs/Web/API/HTMLTrackElement)

Spezifikationen

Specification
HTML
# the-track-element

Browser-Kompatibilität

Siehe auch