HTML5: Videos untertiteln mit dem neuen Track-Element

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Mit 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 auch Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machen Sie Videos für Hörgeschädigte und alle, die gerade keine Lautsprecher zur Verfügung haben, zugänglich.

html5_video_track

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.

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

Das Beispiel zeigt eine klassische Einbindung eines HTML5-Videos. 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 gibt es 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.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
<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 einzublenden 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 verschiedenen Sprachen. Diese Möglichkeit funktioniert derzeit jedoch nur im Internet Explorer. Für Chrome-User bedeutet das, es können lediglich Untertitel für eine Sprache ausgegeben werden.

cc_logo

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.

html5_video_track_einblendung

Per JavaScript auf Tracks und Cues zugreifen

Per JavaScript sprechen Sie die eingebundenen Tracks an. So hat man 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

Derzeit unterstützen fast alle aktuellen Browser die HTML5-Tracks. Lediglich Firefox wird erst ab Version 31 die Darstellung von Untertiteln unterstützen. Während Chrome seit Version 18 dabei ist, unterstützt auch der Internet Explorer ab Version 10 die Tracks. Die Ausgabe mehrsprachiger Untertitel wird derzeit wie bereits erwähnt nur vom Internet Explorer unterstützt.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz