Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Design » HTML5: Videos untertiteln mit dem Track-Element

HTML5: Videos untertiteln mit dem Track-Element

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 8. April 2019
Bookmarke mich
Share on pocket

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

Niels Neumann Online Marketing

Limburgerhof

One Step Webdesign

Hannover

Der Informations­designer

Kaufbeuren

Optimerch GmbH

Dortmund

Haurand Webdesign

Aachen

Alle Agenturpartner

Jobs

Webtexter für SEO Agentur

Salzburg (Österreich)

SEO Junior für Suchmaschinen­optimierung

Salzburg

Google Ads Kampagnen­betreuer

Salzburg

Elektroinstallateur – Rechenzentrum

Karlsruhe

API Developer für die TelemaxX Cloud

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

So findest Du den richtigen Synchronsprecher für Werbespots

Synchronsprecher verleihen einem Darsteller nicht nur ihre Stimme, sondern auch einen ganz eigenen Charakter. In Games, Filmen sowie Werbespots. So findest Du die goldene Stimme:

 →   

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.