Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » HTML5: Videos untertiteln mit dem Track-Element

HTML5: Videos untertiteln mit dem Track-Element

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 8. April 2019

Inhaltsverzeichnis

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.

html5_video_track

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.

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

Denis Potschien

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

pistis wordpress agentur logo

Philipp Pistis – WordPress Agentur

Zolling

Seiten-Werk

Seevetal

Agentur novomyo Logo.

novomyo – Online Marketing Agentur

Hamburg

WebOptimizer Logo mit der Aufschrift: Erfolgreich im Internet.

WebOptimizer – Webseiten und Online-Marketing der nächsten Generation

München

Jocado Logo Texter München.

Jocado

Leipzig

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑