<track>

Zuletzt aktualisiert am 4. Februar 2026

Das <track>-Element bindet Text-Tracks in <video> und <audio> ein: Untertitel, Closed Captions, Audiobeschreibungen oder Kapitelmarken. Die Texte werden im WebVTT-Format bereitgestellt — einfache Textdateien mit Zeitstempeln. Der Browser zeigt sie synchron zum Medieninhalt an, und Nutzer können sie über die Player-Steuerung ein- und ausschalten.

Grundlagen

<track> ist das HTML-Element, das Videos und Podcasts für alle zugänglich macht. Ohne Untertitel sind Medieninhalte für gehörlose und schwerhörige Menschen nicht nutzbar — und auch für alle anderen in Situationen, in denen der Ton nicht abgespielt werden kann (Büro, Bahn, nachts).

• <track> ist ein Void-Element: Es hat keinen schließenden Tag und keinen Inhalt
• Es wird als Kind von <video> oder <audio> verwendet — niemals allein
• Die Textdaten kommen aus einer WebVTT-Datei (.vtt), die über das src-Attribut verlinkt wird
• Das kind-Attribut bestimmt den Typ des Tracks: Untertitel, Captions, Beschreibungen, Kapitel oder Metadaten
• Mehrere <track>-Elemente ermöglichen verschiedene Sprachen und Track-Typen
• Das default-Attribut legt fest, welcher Track automatisch aktiviert wird

Syntax

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="untertitel-de.vtt"
         kind="subtitles"
         srclang="de"
         label="Deutsch"
         default>
</video>

Attribute

Beispiele

Untertitel für ein Video

Der häufigste Anwendungsfall: Untertitel in der Originalsprache des Videos. Die WebVTT-Datei enthält Zeitstempel und Text.

<video controls width="600">
  <source src="tutorial.mp4" type="video/mp4">
  <track src="tutorial-de.vtt"
         kind="subtitles"
         srclang="de"
         label="Deutsch"
         default>
  Dein Browser unterstützt kein Video.
</video>

Die zugehörige WebVTT-Datei (tutorial-de.vtt) sieht so aus:

WEBVTT

00:00:00.000 --> 00:00:03.000
Willkommen zum HTML-Tutorial.

00:00:03.500 --> 00:00:07.000
Heute schauen wir uns das track-Element an.

00:00:07.500 --> 00:00:12.000
Es ermöglicht Untertitel, Captions
und Kapitelmarken für Videos.

Mehrsprachige Untertitel

Mit mehreren <track>-Elementen bietest du Untertitel in verschiedenen Sprachen an. Der Nutzer wählt die Sprache über das Player-Menü.

<video controls width="600">
  <source src="vortrag.mp4" type="video/mp4">
  <track src="vortrag-de.vtt"
         kind="subtitles"
         srclang="de"
         label="Deutsch"
         default>
  <track src="vortrag-en.vtt"
         kind="subtitles"
         srclang="en"
         label="English">
  <track src="vortrag-fr.vtt"
         kind="subtitles"
         srclang="fr"
         label="Français">
</video>

Captions für Hörgeschädigte

Captions (kind="captions") gehen über einfache Untertitel hinaus: Sie beschreiben auch Geräusche, Musik und Sprecher-Wechsel. Das ist wichtig für gehörlose Nutzer, die den Kontext brauchen.

<video controls width="600">
  <source src="film.mp4" type="video/mp4">
  <track src="film-captions-de.vtt"
         kind="captions"
         srclang="de"
         label="Deutsch (CC)"
         default>
</video>

Die WebVTT-Datei für Captions enthält zusätzliche Informationen:

WEBVTT

00:00:00.000 --> 00:00:03.000
[Spannende Musik]

00:00:03.500 --> 00:00:06.000
[Tür knarrt]

00:00:06.500 --> 00:00:09.000
<v Anna>Hallo? Ist jemand da?</v>

00:00:10.000 --> 00:00:13.000
[Stille]

00:00:13.500 --> 00:00:16.000
<v Max>Hier drüben!</v>

Kapitelmarken

Kapitelmarken (kind="chapters") unterteilen ein Video in Abschnitte. Browser, die es unterstützen, zeigen ein Kapitel-Menü in der Player-Steuerung an.

<video controls width="600">
  <source src="kurs.mp4" type="video/mp4">
  <track src="kurs-kapitel.vtt"
         kind="chapters"
         srclang="de"
         label="Kapitel">
  <track src="kurs-untertitel.vtt"
         kind="subtitles"
         srclang="de"
         label="Deutsch"
         default>
</video>

Die WebVTT-Datei für Kapitel:

WEBVTT

00:00:00.000 --> 00:05:00.000
Einführung

00:05:00.000 --> 00:15:00.000
Grundlagen

00:15:00.000 --> 00:30:00.000
Fortgeschrittene Techniken

00:30:00.000 --> 00:40:00.000
Zusammenfassung und Ausblick

Barrierefreiheit

<track> ist eines der wichtigsten Elemente für die Barrierefreiheit von Medieninhalten. Die WCAG 2.1 fordert Untertitel für alle vorproduzierten Video- und Audio-Inhalte (Kriterium 1.2.2 für Captions, 1.2.1 für Transkripte).

Der Unterschied zwischen Subtitles und Captions ist dabei entscheidend:

• Subtitles (kind="subtitles") sind Übersetzungen des gesprochenen Texts — für Nutzer, die die Sprache nicht verstehen
• Captions (kind="captions") sind für gehörlose und schwerhörige Nutzer — sie enthalten auch Geräuschbeschreibungen, Musikhinweise und Sprecher-Identifikation

Für maximale Barrierefreiheit solltest du beide anbieten: Subtitles für Übersetzungen und Captions in der Originalsprache mit Geräuschbeschreibungen.

kind="descriptions" liefert Audiobeschreibungen für blinde Nutzer — gesprochene Beschreibungen visueller Inhalte. Das ist besonders wichtig, wenn das Video Informationen zeigt, die nicht im Ton enthalten sind (z.B. Text auf dem Bildschirm, Diagramme, Grafiken).

Häufige Fehler

Nur kind="subtitles" verwenden: Subtitles sind Übersetzungen, keine Untertitel für Hörgeschädigte. Für gehörlose Nutzer brauchst du kind="captions", das auch Geräusche und Musik beschreibt. Beide Track-Typen haben ihre Berechtigung.

srclang bei Subtitles vergessen: Bei kind="subtitles" ist das srclang-Attribut Pflicht laut HTML-Spezifikation. Es teilt dem Browser die Sprache mit, damit er den Track korrekt zuordnen kann. Ohne srclang ist das HTML ungültig.

Kein default-Track setzen: Ohne default-Attribut wird kein Track automatisch aktiviert. Der Nutzer muss aktiv in die Player-Einstellungen gehen, um Untertitel einzuschalten. Viele Nutzer wissen nicht, dass diese Option existiert — ein default-Track stellt sicher, dass Untertitel sofort sichtbar sind.

WebVTT-Format falsch verwenden: Die VTT-Datei muss mit WEBVTT beginnen (erste Zeile). Zeitstempel verwenden das Format HH:MM:SS.mmm mit --> als Trenner. Ein häufiger Fehler ist die Verwendung von Komma statt Punkt bei Millisekunden (das SRT-Format nutzt Komma, WebVTT nutzt Punkt).

Browser-Kompatibilität

Das track-Element wird von allen modernen Browsern unterstützt. Die Darstellung und die Menü-Integration (besonders für Kapitelmarken) variiert zwischen den Browsern.

Email-Kompatibilität

Das track-Element hat in Email-Clients keine Relevanz, da die Eltern-Elemente (video, audio) selbst in den meisten Clients nicht unterstützt werden.

Verwandte Elemente