Video mit Track

<video id="0" controls >
<track kind="subtitles" label="Menübefehle Shortcuts" src="video/kugel_info.vtt" default>
<source src="video/goldBall.mp4">
</video>

Zusätzliche Spuren und Tracks

Achtung! Die Untertitel werden nur angezeigt, wenn man diese im Videomenü aktiviert (unten rechts). Außerdem funktioniert es nur auf dem Server, nicht offline über das Dateisystem.

In HTML5 bietet sich die Möglichkeit zusätzliche Spuren in Form von Text zu dem Video anzubieten. Die Texte werden zeitgesteuert eingeblendet und liegen in Form von Textdateien vor, die Sie selbst mit einem Editor mit UTF-8 Zeichenkodierung und Endung vtt erstellen können. Es ist das sogenannte WebVTT Format.

Hier die miniTipp.vtt Datei für das Video auf dieser Seite.

Man kann Videountertitel in verschiedenen Sprachen anlegen. Auch Songtexte, die zeitgleich eingeblendet werden sind machbar. Man kann Einsprungspunkte bei längeren Videodateien anbieten. Auch Metadaten für Suchmaschinen sind denkbar. In Videotutorials kann man zusätzliche Informationen wie Tastaturkombinationen oder Menübefehle passend zum Text einblenden, das ist besonder dann wichtig, wenn der Sprecher nujelt und undeutlich spricht :-). Auch ein kompletter Text für Schwerhörige ist eine tolle Anwendungsmöglichkeit.

Zur Zeit stellen noch nicht alle Browser diese Untertitel dar. Jedoch der IE 10 ist bereits dazu in der Lage.

Erstellen Sie innerhalb des video Elementbereichs ein oder mehrere track Elemente. Wieviele hängt davon ab, wieviele Zusatzinformationen Sie einfügen wollen. Die Art der Funktion wird über das Attribut kind angegeben.

Attribute in track Elementen

kind
Hier sind 5 Werte möglich

subtitles Untertitel
captions Zwischenüberschriften bei Szenenwechsel
descrpitions
Wenn ein Video nicht anzeigbar ist oder der User das Video nicht anzeigen möchte, beispielweise für blinde User. Der Text sollte dann als Hörtext ausgegeben werden.
chapters
anspringbare Unterabschnitte, bei längeren Videos
metadata
Zusatzinfos für Suchmaschinen (wird im Video nicht angzeigt)

label
Die Beschriftung des Tracks. Der User bekommt damit eine Auswahlmöglichkeit bei mehreren Tracks.

src
Mit src wird die vtt Datei referenziert.

srclang
Sprache der Untertitel. Hier sind die standardisierten Sprachkürzel erlaubt. de, i, fr, en, es beispielsweise. Gerade für mehrsprachige Untertitel sinnvoll, jeder Track bekommt eine eigene Sprache.

default
Das Standalone Attribut ist eigentlich dazu gedacht bei einer Reihe konkurierender Track Elemente, das favorisierte auszuzeichnen. Achtung! Es sollte aber in jedem Fall gesetzt werden, denn sonst funktioniert es bei Firefox nicht. Wenn das default Attribut nicht gesetzt ist, sind die Untertitel standardmäßig ausgeschaltet. Der User muss sie dann erst im 3 Punkte Menü aktivieren.

Das WebVTT Format

Das WebVTT Format ist ein Klartextformat, welches Sie mit jedem Texteditor herstellen können. Speichern Sie die Datei in UTF-8 ab und vergeben Sie die Dateiendung vtt.

Innerhalb der Datei sollte die erste Zeile mit WEBVTT ausgzeichnet sein. Es folgt eine Leerzeile dann können mehrere Cues eingefügt werden. Cue (dt. Stichwort, Hinweis, Einsatzzeichen)
Geben Sie zu jedem Cue eine Zeitangabe in einer Zeile ein. Das Schema ist
min:sec.millisec --> min:sec.millisecDie erste Angabe ist der Start die zweite das Ende der Einblendung. Es folgt ein Beispiel einer WebVTT Datei.

WEBVTT

00:10.000 --> 00:20.000
Tooor! schon nach den ersten 10 Sekunden fiel das erste Tor.

00:25.000 --> 00:30.000
Noch ein Tooooor! Senstionell bereits nach 25 Sekunden Spielzeit das zweite Tor der Borussen.