HTML5: Videos untertiteln mit dem Track-Element

Seit der Einführung der HTML5-Videos ist das Abspielen von Videos ganz ohne Plug-ins möglich. Doch HTML5-Videos bieten weit mehr, als Videos nativ im Browser darzustellen. Mit der Track-Funktion lassen sich sogar Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machst du Videos für Hörgeschädigte und alle, die gerade keine Lautsprecher zur Verfügung haben, zugänglich.

Das kann das <track>-Element

Die Grundlage zur Einbindung von Untertiteln ist das <track>-Element, welches auf die Textdatei mit den Untertiteln verweist und die Art der Texteinblendung definiert. Neben Untertiteln (subtitles) gibt es auch noch die Möglichkeit, Überschriften (captions) , Beschreibungen (descriptions), Kapitel (capitals) und Metadaten (metadata) einzublenden.

Die häufigste Art der Texteinblendung dürften jedoch die Untertitel sein, welche dazu dienen, das gesprochene Wort wiederzugeben. Die Ausgabe der Untertitel ist auch die einzige Texteinblendung, die von „normalen“ Browsern unterstützt wird. Alle anderen Einblendungsarten können nur von speziellen Screenreadern für Menschen mit Sehbehinderungen interpretiert werden.

Als Metadaten ausgezeichnete Tracks werden grundsätzlich nicht ausgegeben. Sie können genutzt werden, wenn man beispielsweise bestimmte Inhalte ausschließlich per JavaScript nutzen möchte.

Das folgende Beispiel zeigt eine klassische Einbindung eines HTML5-Videos.

<video width="400" height="300">
  <source src="film.mp4 type="video/mp4" />
  <source src="film.webm" type="video/webm" />
  <track src="untertitel.vtt" kind="subtitles" />
  <track src="beschreibungen.vtt" kind="descriptions" />
</video>

Per <source>-Element werden unterschiedliche Videoformate eingebunden, da jeder Browser ein anderes Format bevorzugt. Es folgen zwei <track>-Elemente – eines für Untertitel und eines für Beschreibungen. Die Art der Texteinblendungen wird über das kind-Attribut bestimmt. Während der Wert subtitles klassische Untertitel wiedergibt, werden per descriptions Beschreibungen wiedergegeben.

Beschreibungen dienen beispielsweise dazu, eine Szenerie in Textform wiederzugeben. Will man Videos auch für Menschen mit Sehbehinderungen zugänglich machen, ist es sinnvoll, ein <track>-Element für Beschreibungen einzubinden. Screenreader können diese Beschreibungen dann ausgeben. Andere Browser ignorieren Beschreibungstracks wie auch die anderen Tracks (bis auf Untertitel).

Über das src-Attribut wird die Datei angegeben, in der die Texte für das Video hinterlegt sind. Damit der Browser die Einblendungen interpretieren kann, müssen diese in einem bestimmten Format hinterlegt sein. Das gängige Format ist WebVTT: Web Video Text Tracks.

Zu guter Letzt brauchen wir noch das srclang-Attribut, mit dem die Sprache der Einblendungen angegeben werden kann. Dieses Attribut erlaubt es, für verschiedene Sprachen jeweils eine eigene Textdatei mit Einblendungen zu hinterlegen. Das kann so aussehen:

<video width="400" height="300">
  …
  <track src="untertitel_de.vtt" kind="subtitles" srclang="de" default />
  <track src="untertitel_en.vtt" kind="subtitles" srclang="en" />
</video>

Im Beispiel hinterlegen wir Untertitel in deutscher und englischer Sprache. Das Attribut default gibt an, welche Sprache standardmäßig wiedergegeben werden soll.

Aufbau der WebVTT-Dateien

Eingeleitet wird die Textdatei mit der Angabe des verwendeten Formats. Es folgen jeweils durch Leerzeilen getrennt die einzelnen Texteinblendungen, Cues genannt. Jeder Cue besteht aus der Angabe einer Zeitspanne, innerhalb derer die Einblendung dargestellt werden soll, sowie aus dem darzustellenden Text.

WEBVTT FILE

00:00:05.000 --> 00:00:20.000
Das will ich schwarz auf weiß sehen.

00:00:35.000 --> 00:00:50.000
Ich auch.

Im Beispiel beginnt die erste Texteinblendung bei fünf Sekunden und endet bei 20 Sekunden. Die Angabe der Zeitspanne muss exakt so erfolgen, wie es im Beispiel dargestellt ist. Für die beiden Zeiten müssen also zwingend Stunden, Minuten, Sekunden und Millisekunden angegeben werden. Die Trennung von Einblendungbeginn und -ende erfolgt über „–>“ und wird mit Leerzeichen von den Zeiten getrennt.

Danach geben wir den einzublendenden Text an. Dieser kann sich über mehrere Zeilen erstrecken. Erst durch eine Leerzeile wird die nächste Einblendung begonnen.

Untertitel für ein Video aktivieren

Sobald für einVideo per <track>-Element Untertitel hinterlegt sind, erscheint in der Steuerungsleiste eine zusätzliche Schaltfläche mit der Beschriftung CC für „closed captioning“. Über diese Schaltfläche werden die Untertitel ein- und ausgeblendet. Sind für ein Video Untertitel in mehreren Sprachen hinterlegt, erscheint beim Klick auf die Schaltfläche eine Liste mit den verfügbaren Sprachen.

Besitzt eines der <track>-Elemente das default-Attribut, sind die Untertitel automatisch aktiviert. Sie können jedoch über die Schaltfläche auch wieder ausgeschaltet werden.

Darstellung der Einblendungen

Standardmäßig erfolgen die Einblendungen in weißer Schrift auf schwarzem Hintergrund. Per Stylesheets kann das Aussehen der Einblendungen jedoch angepasst werden. Dazu gibt es das Pseudoelement ::cue. Darüber ist es möglich, Schriftart und -farbe, sowie die Hintergrundfarbe für die Einblendungen zu verändern.

::cue {
  color: black;
  background: white;
}

Mit den Angaben im Beispiel erfolgen die Einblendungen in schwarzer Schrift auf weißem Hintergrund.

Per JavaScript auf Tracks und Cues zugreifen

Per JavaScript sprichst du die eingebundenen Tracks an. So hast du die Möglichkeit, Untertitel per JavaScript ein- und auszuschalten. Das ist dann hilfreich, wenn man zum Beispiel eine eigene Steuerleiste gestaltet hat und die einzelnen Schaltflächen per JavaScript steuern muss.

document.getElementsByTagName("video")[0].textTracks[0].mode = "showing";

Im Beispiel wird das erste Videoelement eines HTML-Dokuments und per textTracks der erste darin ausgezeichnete Track angesprochen. Über die Eigenschaft mode kann die Einblendung ein- (showing) und ausgeschaltet (hidden) werden.

Statt nur der Tracks können auch einzelne Cues abgefragt werden. So ist es möglich, jede einzelne Texteinblendung per JavaScript auszulesen.

alert(document.getElementsByTagName("video")[0].textTracks[0].cues[3].text);

Im Beispiel wird der vierte Cue des ersten Tracks abgefragt. Per text wird der entsprechende Einblendungstext in einem Alert ausgegeben.

Zukünftig werden sich Tracks und Cues dynamisch per JavaScript hinzufügen lassen. Aktuell wird das noch von keinem Browser unterstützt.

Browserunterstützung

Alle aktuellen Browser unterstützen das <track>-Element. Lediglich der Opera unter Android und der mobile Safari spielen nicht mit.

Suchst du nach einer Lösung, wie du HTML und CSS bearbeitest? Wir haben 10 HTML-Editoren getestet und stellen sie vor. Vielleicht ist auch für dich etwas dabei?

Beitragsbild: Depositphotos

(Der Beitrag erschien erstmals im Juni 2014 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im April 2019.)