<track> HTML-Einbettungselement für Textspuren

Probieren Sie es aus

<video controls src="/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    label="English"
    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 werden sollte, es sei denn, die Präferenzen des Benutzers zeigen 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 es metadata verwenden. Die folgenden Schlüsselwörter sind erlaubt:

subtitles

Untertitel bieten eine Transkription oder Übersetzung des Dialogs. Sie sind geeignet, wenn der Ton verfügbar, aber nicht verständlich ist, wie beispielsweise Sprache oder Text, der nicht in Englisch in einem englischsprachigen Film ist. Untertitel können zusätzliche Inhalte enthalten, normalerweise zusätzliche Hintergrundinformationen. Zum Beispiel der Text am Anfang der Star Wars-Filme oder das Datum, die Zeit und der Ort einer Szene. Die Informationen von Untertiteln ergänzen Audio und Video. Sie sind oft im Video selbst eingebettet, können aber auch separat bereitgestellt werden, insbesondere für komplette Filmübersetzungen.

captions

Geschlossene Untertitel bieten eine Transkription oder Übersetzung des Dialogs, der Toneffekte, relevanter Musikhinweise und anderer relevanter Audioinformationen, wie die Quelle des Hinweises (z.B. Charakter, Umgebung). Sie sind geeignet, wenn der Ton nicht verfügbar oder nicht klar hörbar ist (z.B. weil er stummgeschaltet ist, von Umgebungsgeräuschen übertönt wird oder weil der Benutzer taub ist).

descriptions

Beschreibungen fassen die Video-Komponente der Medienressource zusammen. Sie sollen als Audio synthetisiert werden, wenn die visuelle Komponente verdeckt, nicht verfügbar oder nicht nutzbar ist (z.B. weil der Benutzer mit der Anwendung ohne Bildschirm interagiert, während er fährt, oder weil der Benutzer blind ist).

chapters

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

metadata

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

label

Ein vom Benutzer lesbarer Titel der Textspur, der vom Browser beim Auflisten der verfügbaren Textspuren verwendet wird.

src

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

srclang

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

Verwendungshinweise

Datenarten der Spuren

Der Typ der Daten, die track zu den Medien hinzufügt, wird im kind-Attribut festgelegt, das die Werte subtitles, captions, chapters oder metadata annehmen kann. Das Element verweist auf eine Quelldatei, die zeitlich gesteuerten Text enthält, den der Browser bereitstellt, wenn der Benutzer zusätzliche Daten anfordert.

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

Erkennung von Hinweisänderungen

Die zugrunde liegende TextTrack, angegeben durch die track Eigenschaft, erhält jedes Mal ein cuechange-Ereignis, wenn der aktuell präsentierte Hinweis 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;
});

Textspuren programmatisch hinzufügen

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

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

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 Text Track Format
• HTMLMediaElement.textTracks