HTML <track>-Tag
Der <track>-Tag fügt Untertitel, Beschriftungen, Beschreibungen, Kapitel oder Metadaten zu <audio> und <video> über WebVTT-Dateien hinzu.
Der <track>-Tag ist eines der HTML5-Elemente. Er fügt zeitgesteuerte Texttracks — Untertitel, Beschriftungen, Beschreibungen, Kapitel oder Metadaten — zu einem <video>- oder <audio>-Medienelement hinzu. Ein Track ist die Standardmethode, um Medien barrierefrei zu gestalten: Er ermöglicht es gehörlosen oder schwerhörigen Zuschauern, das Gesagte zu lesen, hilft Nicht-Muttersprachlern beim Verfolgen des Inhalts und erlaubt Browsern, eine Kapitelnavigation anzubieten.
Das <track>-Element ist immer ein untergeordnetes Element eines <video>- oder <audio>-Elements und wird nach allen <source>-Elementen platziert. Es ist leer und verweist (über src) auf eine externe WebVTT-Datei (.vtt), die den zeitgesteuerten Text enthält. Der Browser zeigt diesen Text automatisch während der Mediawiedergabe an.
Ein einzelnes Mediaelement kann mehrere <track>-Elemente enthalten — zum Beispiel eines für jede Sprache —, aber es darf nicht zwei Tracks geben, die dasselbe kind, srclang und label teilen.
Syntax
Der <track>-Tag ist leer, das bedeutet, das schließende Tag ist nicht erforderlich. In XHTML muss der <track>-Tag jedoch selbstschließend sein (<track />).
HTML <track>-Tag
<audio> or <video>
...
<track src="...">
...
</audio> or </video>Beispiel des HTML <track>-Tags:
HTML <track>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
default | default | Markiert den Track als denjenigen, der standardmäßig aktiviert werden soll, sofern die Benutzereinstellungen keinen anderen als geeigneter angeben. Nur ein Track pro Mediaelement darf dieses Attribut haben. |
kind | subtitles, captions, descriptions, chapters, metadata | Definiert den Typ des Texttracks (siehe Tabelle unten). Standardwert ist subtitles. |
label | text | Ein für Menschen lesbarer Titel des Tracks. Dies ist der Name, der dem Benutzer im Track-Auswahlmenü des Players angezeigt wird (z. B. „English", „Français"). |
src | URL | Der Pfad zur WebVTT-Datei (.vtt). Erforderlich. |
srclang | language_code | Die Sprache des Track-Textes als BCP 47-Tag (z. B. en, fr, pt-BR). Erforderlich wenn kind="subtitles". |
Werte des kind-Attributs
| Wert | Zweck |
|---|---|
subtitles | Übersetzung des Dialogs für Zuschauer, die hören können, aber die Sprache möglicherweise nicht verstehen. Erfordert srclang. |
captions | Eine Transkription des Dialogs plus nicht-sprachlicher Geräusche (Soundeffekte, Musikhinweise, wer spricht). Gedacht für gehörlose und schwerhörige Zuschauer. |
descriptions | Textbeschreibungen des visuellen Inhalts des Videos, die für blinde oder sehbehinderte Benutzer laut vorgelesen werden sollen (synthetische Sprache), wenn die Handlung nicht durch den Ton vermittelt wird. |
chapters | Kapitelüberschriften zur Navigation im Medium. |
metadata | Daten zur Verwendung durch Skripte. Dieser Track wird dem Benutzer nicht angezeigt. |
Der <track>-Tag unterstützt außerdem die globalen Attribute und die Ereignisattribute.
Was ist eine WebVTT-Datei?
Der von einem <track> angezeigte Text befindet sich in einer separaten Datei, die im WebVTT-Format (Web Video Text Tracks) geschrieben ist, mit der Erweiterung .vtt gespeichert und als text/vtt ausgeliefert wird. Jede WebVTT-Datei beginnt mit der Zeile WEBVTT, gefolgt von einem oder mehreren Cues. Jeder Cue hat einen Zeitbereich (start --> end, im Format hh:mm:ss.ttt) und den Text, der während dieses Bereichs angezeigt wird:
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome to the demo video.Es können viele Cues vorhanden sein, optional durch Leerzeilen getrennt, und jeder Cue kann eine optionale ID-Zeile über seinem Zeitstempel tragen. Der Browser gleicht die aktuelle Wiedergabezeit mit einem Cue ab und rendert dessen Text über dem Medium.
Beispiel mit mehreren Tracks
Eine verbreitete Einrichtung ist das Anbieten von Beschriftungen in einer Sprache und Untertiteln in einer anderen. Geben Sie jedem Track ein klares label, damit die Benutzer den richtigen aus dem Player-Menü auswählen können, und markieren Sie einen einzelnen Track als default:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video
controls
width="320"
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
>
<track
default
kind="captions"
srclang="en"
label="English"
src="captions-en.vtt"
/>
<track
kind="subtitles"
srclang="fr"
label="Français"
src="subtitles-fr.vtt"
/>
</video>
</body>
</html>Der Player zeigt einen „English"- und einen „Français"-Eintrag im Untertitel-/Beschriftungsmenü an; englische Beschriftungen erscheinen standardmäßig, da dieser Track das default-Attribut trägt.
Barrierefreiheit
Das <track>-Element ist der HTML-Mechanismus zur Erfüllung zentraler WCAG-Erfolgskriterien:
- Beschriftungen (WCAG 1.2.2) — Stellen Sie ein
<track kind="captions">bereit, damit gehörlose und schwerhörige Benutzer sowohl den Dialog als auch wichtige Geräusche in aufgezeichneten Medien wahrnehmen können. - Audiobeschreibung (WCAG 1.2.3 / 1.2.5) — Stellen Sie ein
<track kind="descriptions">bereit, damit blinde und sehbehinderte Benutzer eine Beschreibung wichtiger visueller Informationen erhalten.
Da der Track-Text zeitgesteuerter Text in einer separaten Datei ist, können ihn auch Suchmaschinen und assistive Technologien lesen, was sowohl die Barrierefreiheit als auch die Auffindbarkeit verbessert.