<track>

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

Steckbrief <track>

Kategorie: Links & Medien
Art: Leeres Element
Attribute: 5
Beispiele: 4
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

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

5 Attribute

Attribut und Beispiel	Beschreibung
`src` URL src="untertitel.vtt"	Pfad zur WebVTT-Datei (.vtt) mit den Textdaten.
`kind` String kind="subtitles"	Typ des Tracks: subtitles (Übersetzungen), captions (Untertitel für Hörgeschädigte, inkl. Geräusche), descriptions (Audiobeschreibung), chapters (Kapitelmarken) oder metadata (nicht sichtbare Daten für Scripts).
`srclang` String srclang="de"	Sprache des Tracks als BCP 47 Language Tag. Pflicht bei kind="subtitles".
`label` String label="Deutsch"	Sichtbarer Name des Tracks im Player-Menü. Sollte immer gesetzt werden, damit Nutzer den Track auswählen können.
`default` Boolean default	Aktiviert diesen Track automatisch beim Laden. Pro kind sollte nur ein Track default sein.

Beispiele

4 Beispiele

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.

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 (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 (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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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

Chrome

Komplett

Seit Chrome 23. Gute Unterstützung für subtitles, captions und chapters.
Firefox

Komplett

Seit Firefox 31. Unterstützt subtitles und captions. chapters-Darstellung eingeschränkt.
Safari

Komplett

Seit Safari 6. Gute Unterstützung aller Track-Typen.
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

Apple Mail kann video-Elemente anzeigen, aber track-Untertitel werden in der Regel nicht dargestellt.
Gmail

Keine

Gmail entfernt video- und audio-Elemente komplett. track hat keine Funktion.
Outlook

Keine

Outlook unterstützt keine Media-Elemente. Verlinke Videos statt sie einzubetten.
Thunderbird

Teilweise

Grundlegende Video-Unterstützung vorhanden, track-Darstellung variiert.
Yahoo Mail

Keine

Yahoo Mail entfernt Media-Elemente. Verwende Links zu Video-Plattformen.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da