<track>: Das eingebettete Textspur-Element
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 über ein Video oder neben Audiotracks einzublenden.
Mehrere Spuren können für ein Medienelement angegeben werden, die unterschiedliche Arten von zeitgesteuerten Textdaten oder zeitgesteuerte Textdaten enthalten, die für verschiedene Sprachen übersetzt wurden. Die verwendeten Daten werden entweder die Spur sein, die als Standard festgelegt wurde, oder eine Art und Übersetzung, die auf den Benutzerpräferenzen basieren.
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 beinhaltet die globalen Attribute.
default
-
Dieses Attribut zeigt an, dass die Spur aktiviert werden sollte, es sei denn, die Benutzerpräferenzen deuten darauf hin, dass eine andere Spur geeigneter ist. Dies darf nur auf einem
track
-Element pro Medienelement verwendet werden. kind
-
Wie die Textspur verwendet werden soll. Wenn das Attribut weggelassen wird, ist die Standardart
subtitles
. Wenn das Attribut einen ungültigen Wert enthält, wird esmetadata
verwenden. Die folgenden Schlüsselwörter sind erlaubt:-
subtitles
- Untertitel bieten eine Übersetzung von Inhalten, die der Betrachter nicht versteht. Zum Beispiel gesprochene Sprache oder Text, der nicht in Englisch in einem englischen Film ist.
- Untertitel können zusätzlichen Inhalt enthalten, normalerweise zusätzliche Hintergrundinformationen. Zum Beispiel der Text am Anfang 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 musikalische Hinweise 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 sind dazu gedacht, verwendet zu werden, wenn der Benutzer die Medienressource navigiert.
-
metadata
- Spuren, die von Skripten verwendet werden. Nicht für den Benutzer sichtbar.
-
label
-
Ein für den Benutzer lesbarer Titel der Textspur, der vom Browser verwendet wird, um verfügbare Textspuren aufzulisten.
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 übergeordnete Element<audio>
oder<video>
destrack
-Elements hat eincrossorigin
Attribut. srclang
-
Sprache der Spur-Textdaten. Sie muss ein gültiges BCP 47 Sprach-Tag sein. Wenn das
kind
-Attribut aufsubtitles
gesetzt ist, dann musssrclang
definiert sein.
Nutzungshinweise
Track-Datentypen
Die Art der Daten, die track
dem Medium hinzufügt, wird im kind
-Attribut festgelegt, das Werte wie subtitles
, captions
, chapters
oder metadata
annehmen kann. Das Element verweist 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 eine track
mit demselben kind
, srclang
und label
haben.
Erkennung von Hinweisänderungen
Das zugrunde liegende TextTrack
, das durch die track
Eigenschaft angezeigt wird, erhält ein cuechange
-Ereignis jedes Mal, wenn sich der aktuell präsentierte Hinweis ändert. Dies geschieht auch dann, 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 programmatisch
Die JavaScript-Schnittstelle, die das <track>
-Element repräsentiert, ist HTMLTrackElement
. Die der zugehörigen Textspur kann vom HTMLTrackElement.track
-Eigenschaft erhalten werden und ist vom Typ TextTrack
.
TextTrack
Objekte können auch zu einem HTMLVideoElement
oder HTMLAudioElement
Elementen mit der HTMLMediaElement.addTextTrack()
-Methode hinzugefügt werden. Die mit einem Medienelement verbundenen TextTrack
Objekte sind in einer TextTrackList
gespeichert, die mit der 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 Übersicht
Inhaltskategorien | Keine |
---|---|
Erlaubter Inhalt | Keiner; es ist ein void element. |
Tag-Auslassung | Muss ein Anfangstag haben und darf keinen Endtag haben. |
Erlaubte Eltern | |
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 |