Track-Elemente – Erste Schritte

HTML5 Rocks

HTML5-Track-Element: Erste Schritte

Das Track-Element bietet eine einfache und standardisierte Möglichkeit, Untertitel, Screenreader-Beschreibungen und Kapitel zu Video- und Audioinhalten hinzuzufügen.

Die Elemente können auch in Verbindung mit anderen zeitgesteuerten Metadaten verwendet werden. Bei den Quelldaten jedes Track-Elements handelt es sich um eine Textdatei, die aus einer Liste mit zeitgesteuerten cues besteht, wobei diese Daten im Format JSON, CSV usw. enthalten können. Es ist ein extrem leistungsstarkes Werkzeug und ermöglicht neben Deep Linking und Mediennavigation über eine Textsuche auch eine DOM-Manipulation sowie sonstige mit der Medienwiedergabe synchronisierte Verhaltensweisen.

Das Track-Element ist zurzeit in Internet Explorer 10 und Chrome 18 oder einer höheren Version verfügbar. Für Firefox ist noch keine Implementierung erfolgt. In Chrome muss die Unterstützung des Track-Elements über die Seite chrome://flags aktiviert werden.

Im Folgenden finden Sie ein einfaches Beispiel eines Videos mit einem Track-Element. Starten Sie es, um Untertitel in englischer Sprache anzuzeigen:

Für diese Demo ist ein Browser wie Google Chrome Canary erforderlich, der das Track-Element unterstützt. In Chrome muss die Unterstützung des Track-Elements auf der Seite chrome://flags aktiviert werden.

Code für ein Videoelement mit englischen und deutschen Untertiteln könnte wie folgt aussehen:

<video src="foo.ogv">
  <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
  <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track>
</video>

In diesem Beispiel würde das Videoelement einen Selektor anzeigen, über den der Nutzer die Sprache der Untertitel auswählen könnte. Zum Zeitpunkt der Entstehung dieses Artikels war diese Funktion jedoch noch nicht implementiert.

Beachten Sie, dass das Track-Element nicht in Verbindung mit einer file://-URL verwendet werden kann. Um die Tracks zu sehen, müssen Sie die Dateien auf einem Webserver hinterlegen.

Jedes Track-Element weist ein Attribut für kind auf. Dies kann entweder subtitles, captions, descriptions, chapters oder metadata sein. Das Attribut src des Track-Elements verweist auf eine Textdatei, die Daten für zeitgesteuerte Track-Cues enthält. Hinsichtlich des Formats gibt es keine speziellen Vorgaben, solange es von einem Browser geparst werden kann. Chrome unterstützt WebVTT, das wie folgt aussieht:

WEBVTT FILE

railroad
00:00:10.000 --> 00:00:12.500
Uninspiriert durch die Kruste des Eisenbahnstaubs

manuscript
00:00:13.200 --> 00:00:16.900
das die Hinweise auf die Seiten Ihres Manuskripts betraf.

Jedes Element in einer Track-Datei wird als "Cue" bezeichnet. Jeder Cue hat eine Start- und Endzeit, getrennt durch einen Pfeil. Der zugehörige Text befindet sich in der Zeile darunter. Cues können optional auch IDs aufweisen. In den oben genannten Beispielen sind das "railroad" und "manuscript". Cues werden durch eine Leerzeile voneinander getrennt.

Die Zeitangaben erfolgen im Format Stunden:Minuten:Sekunden:Millisekunden. Vorsicht! Der Parsing-Prozess ist strikt. Die Zahlen müssen falls nötig mit Nullen aufgefüllt werden: Stunden, Minuten und Sekunden müssen zwei Ziffern (00 im Falle eines Nullwerts) und Millisekunden drei Ziffern aufweisen (000 im Falle eines Nullwerts). Auf quuz.org/webvtt finden Sie einen ausgezeichneten WetVTT-Validierer. Dieser sucht nach Fehlern bei der Zeitformatierung und Problemen wie nicht sequenziellen Zeitangaben.

Die folgende Demo zeigt, wie Suchtitel durchsucht werden können, um innerhalb eines Videos zu navigieren.

HTML und JSON in Cues

Der Text eines Cues in einer WebVTT-Datei kann sich über mehrere Zeilen erstrecken, solange keine der Zeilen leer ist. Das bedeutet, dass Cues HTML enthalten können:

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
<p>Mehrzellige Organismen bestehen aus verschiedenen Zellarten, die spezielle Funktionen übernehmen.</p>
<p>Die meisten Lebensformen, die sich mit bloßem Auge erkennen lassen, sind mehrzellig.</p>
<p>Diese Organismen haben sich vor rund einer Milliarde Jahre entwickelt, wobei Pflanzen, Tiere und Pilze unabhängig voneinander entstanden sind.</p>

Warum hier aufhören? Cues können auch JSON verwenden:

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
{
"title": "Mehrzellige Organismen",
"description": "Mehrzellige Organismen bestehen aus verschiedenen Zellarten, die spezielle Funktionen übernehmen.
  Die meisten Lebensformen, die sich mit bloßem Auge erkennen lassen, sind mehrzellig. Diese Organismen haben sich
  vor rund einer Milliarde Jahre entwickelt, wobei Pflanzen, Tiere und Pilze unabhängig
  voneinander entstanden sind.",
"src": "multiCell.jpg",
"href": "http://de.wikipedia.org/wiki/Vielzeller"
}

insects
00:02:18.800 --> 00:03:01.600
{
"title": "Insekten",
"description": "Insekten sind weltweit die artenreichste Klasse der Tiere. Laut Schätzungen gibt es heute
  zwischen 2 und 50 Millionen Arten. Die ersten Insekten wurden vor rund
  400 Millionen Jahren nachgewiesen. Sie zeichnen sich durch einen harten Hautpanzer, einen dreiteiligen Körper, sechs Beine, Facettenaugen
  und eine Antenne aus.",
"src": "insects.jpg",
"href": "http://de.wikipedia.org/wiki/Insekten"
}

Aufgrund der Möglichkeit, strukturierte Daten in Cues zu verwenden, ist das Track-Element besonders leistungsstark und flexibel. Eine Web-App kann Cue-Ereignisse überwachen, den Text der einzelnen Cues extrahieren, sobald diese ausgelöst werden, die Daten parsen und die Ergebnisse verwenden, um mit der Medienwiedergabe synchronisierte DOM-Änderungen vorzunehmen. Alternativ können auch andere JavaScript- oder CSS-Aufgaben durchgeführt werden.

Tracks können auch einen Mehrwert für Audio- und Videoinhalte bedeuten, denn damit werden Suchen einfacher, leistungsstarker und präziser.

Cues enthalten Text, der indexiert werden kann, sowie eine Startzeit, die die zeitliche Position des Inhalts innerhalb der Medien angibt. Cues können sogar Daten zur Position von Elementen innerhalb eines Videoframes enthalten. In Kombination mit Medienfragment-URIs stellen Tracks eine leistungsstarke Möglichkeit dar, Inhalte in Audio- und Videodateien zu finden und an die entsprechende Stelle zu navigieren. Stellen Sie sich zum Beispiel vor, Sie suchen nach "Etta James" und erhalten Ergebnisse, die direkt auf Stellen in Videos verweisen, an denen ihr Name im Cue-Text erwähnt wird.

Die Tree Of Life-Demo ist ein einfaches Beispiel dafür, wie ein Metadaten-Track verwendet werden kann, um mithilfe einer Untertitelsuche zu navigieren. Außerdem zeigt sie, wie zeitgesteuerte Metadaten eine Manipulation des DOMs ermöglichen, das mit der Medienwiedergabe synchronisiert ist.

Mit JavaScript zu Tracks und Cues gelangen

Audio- und Videoelemente verfügen über eine textTracks-Eigenschaft, die eine TextTrackList zurückgibt. Jedes Mitglied ist dabei ein TextTrack, der einem <track>-Element entspricht:

var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks; // one for each track element
var textTrack = textTracks[0]; // corresponds to the first track element
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode // 0 (TextTrack.OFF in spec, TextTrack.DISABLED in Chrome), 1 (TextTrack.HIDDEN) or 2 (TextTrack.SHOWING)

Jeder TextTrack wiederum verfügt über eine cues-Eigenschaft, die eine TextTrackCueList zurückgibt, wobei jedes Mitglied ein individueller Cue ist. Cue-Daten können mit Eigenschaften wie startTime, endTime und text (für den Textinhalt des Cues) aufgerufen werden:

var cues = textTrack.cues;
var cue = cues[0]; // corresponds to the first cue in a track src file
var cueId = cue.id // cue.id corresponds to the cue id set in the WebVTT file
var cueText = cue.text; // "The Web is always changing", for example (or some JSON!)

Gelegentlich ist es auch sinnvoll, mithilfe von HTMLTrackElement zu TextTrack-Objekten zu gelangen:

var trackElements = document.querySelectorAll("track");
// for each track element
for (var i = 0; i < trackElements.length; i++) {
  trackElements[i].addEventListener("load", function() {
    var textTrack = this.track; // gotcha: "this" is an HTMLTrackElement, not a TextTrack object
    var isSubtitles = textTrack.kind === "subtitles"; // for example...
    // for each cue
    for (var j = 0; j < textTrack.cues.length; ++j) {
      var cue = textTrack.cues[j];
      // do something
    }
}

In diesem Beispiel wird über die track-Eigenschaft eines Track-Elements auf die TextTrack-Eigenschaften zugegriffen, nicht über das Element selbst.

Ein Zugriff auf TextTracks ist möglich, sobald das load-Ereignis ausgelöst wurde, nicht früher.

Track- und Cue-Ereignisse

Die zwei Arten von Cue-Ereignissen sind:

  • für Cues ausgelöste Eingabe- und Beendigungsereignisse
  • für Tracks ausgelöste Cuechange-Ereignisse

Im vorherigen Beispiel könnten Listener für Cue-Ereignisse wie folgt hinzugefügt werden:

cue.onenter = function(){
  // do something
};

cue.onexit = function(){
  // do something else
};

Beachten Sie, dass Eingabe- und Beendigungsereignisse nur ausgelöst werden, wenn Cues über die Wiedergabe eingegeben oder beendet werden. Falls der Nutzer den Schieberegler der Zeitleiste manuell nach links oder rechts zieht, wird ein Cuechange-Ereignis für den Track an der neuen Zeitposition ausgelöst, jedoch kein Eingabe- oder Beendigungsereignis. Dies kann umgangen werden, indem das Cuechange-Track-Ereignis überwacht wird und anschließend die aktiven Cues abgerufen werden. Beachten Sie, dass möglicherweise mehrere aktive Cues vorhanden sind.

Im folgenden Beispiel wird der aktuelle Cue abgerufen, sobald sich der Cue ändert. Anschließend wird versucht, durch Parsen des Cue-Texts ein Objekt zu erstellen:

textTrack.oncuechange = function (){
  // "this" is a textTrack
  var cue = this.activeCues[0]; // assuming there is only one active cue
  var obj = JSON.parse(cue.text);
  // do something
}

Nicht nur für Video

Tracks können sowohl mit Audio- als auch mit Videoinhalten verwendet werden. Sie benötigen keine Audio-, Video- oder Track-Elemente in HTML-Auszeichnungssprache, um von den Vorteilen der APIs zu profitieren. Die TextTrack-API-Dokumentation hält ein schönes Beispiel bereit und zeigt, wie sich Audio-Sprites ganz einfach implementieren lassen:

var sfx = new Audio('sfx.wav');
var track = sfx.addTextTrack('metadata'); // previously implemented as addTrack()

// Add cues for sounds we care about.
track.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
track.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));

function playSound(id) {
  sfx.currentTime = track.getCueById(id).startTime;
  sfx.play();
}

playSound('dog bark');
playSound('kitten mew');

Die addTextTrack-Methode verwendet drei Parameter: kind (zum Beispiel "metadata", siehe oben), label (zum Beispiel "Sous-titres français") und language (zum Beispiel "fr").

Das oben stehende Beispiel verwendet zudem addCue in Form eines TextTrackCue-Objekts. Der entsprechende Konstruktor besteht neben id (zum Beispiel "dog bark"), startTime, endTime und text für den Cue aus einem Argument für die webVTT-Cue-Einstellungen hinsichtlich Position, Größe und Ausrichtung sowie einer booleschen pauseOnExit-Kennzeichnung, damit zum Beispiel die Wiedergabe angehalten wird, wenn in einem Lehrvideo eine Frage gestellt wird.

Beachten Sie, dass startTime und endTime als Gleitkommawerte in Sekunden und nicht wie bei WebVTT im Format Stunden:Minuten:Sekunden:Millisekunden angegeben werden.

Cues können auch mit removeCue() entfernt werden. In diesem Fall wird ein Cue als Argument verwendet, zum Beispiel:

var videoElement = document.querySelector("video");
var track = videoElement.textTracks[0];
var activeCue = track.activeCues[0];
track.removeCue(activeCue);

Beim Ausprobieren werden Sie feststellen, dass ein gerenderter Cue entfernt wird, sobald der Code aufgerufen wird.

Tracks verfügen über ein mode-Attribut: entweder 0 (TextTrack.OFF in der Spezifikation, TextTrack.DISABLED in Chrome), 1 (TextTrack.HIDDEN) oder 2 (TextTrack.SHOWING). Dies kann besonders dann hilfreich sein, wenn Sie Track-Ereignisse verwenden, den standardmäßigen Rendering-Vorgang jedoch deaktivieren möchten. Ein Beispiel hierfür finden Sie im folgenden Video (erstellt von Eric Bidelman):

test1
asdf2

Dieses Beispiel verwendet die getCueAsHTML()-Methode, bei der eine HTML-Version jedes Cues zurückgegeben wird. Die Konvertierung vom WebVTT-Format in ein HTML DocumentFragment erfolgt hierbei mithilfe des WebVTT-Cue-Text-Parsing sowie der Regeln zum DOM-Aufbau. Verwenden Sie die text-Eigenschaft eines Cues, wenn Sie lediglich den reinen Textwert des Cues aus der src-Datei benötigen.

In diesem Zusammenhang kann sich die getCueAsHTML()-Methode als hilfreich erweisen, bei der eine HTML-Version jedes Cues zurückgegeben wird. Die Konvertierung vom WebVTT-Format in ein HTML DocumentFragment erfolgt hierbei mithilfe des WebVTT-Cue-Text-Parsing sowie der Regeln zum DOM-Aufbau. Verwenden Sie die text-Eigenschaft eines Cues, wenn Sie lediglich den reinen Textwert des Cues aus der src-Datei benötigen.

Weitere Informationen zu Markup

Markup kann zur Zeitstempelzeile eines Cues hinzugefügt werden, um Textrichtung, Ausrichtung und Position festzulegen. Cue-Text kann so ausgezeichnet werden, dass Sprachinhalte, zum Beispiel der Name des Sprechers, angegeben werden oder eine Formatierung hinzugefügt wird. Untertitel können mit CSS wie folgt bearbeitet werden:

::cue {
  color: #444;
  font: 1em sans-serif;
}
::cue .warning {
  color: red;
  font: bold;
}

Die Präsentation zu Bedienungshilfen für HTML5-Videos von Silvia Pfeiffer enthält weitere Beispiele zum Arbeiten mit Markup. Darüber hinaus erfahren Sie, wie Sie Kapitel-Tracks für die Navigation und Beschreibungs-Tracks für Screenreader erstellen.

Und last, but not least...

Speichern Sie Cue-Daten in Textdateien, anstatt eine In-Band-Codierung in Audio- oder Videodateien vorzunehmen. So ist eine Untertitelung unkompliziert und Sie verbessern gleichzeitig die Bedienfreundlichkeit, die Suchmöglichkeiten sowie die Portabilität von Daten.

Das Track-Element ermöglicht auch die Verwendung von zeitgesteuerten Metadaten und dynamischen Inhalten, die mit der Medienwiedergabe verknüpft sind. Dies wiederum bedeutet einen Mehrwert für die Audio- und Videoelemente.

Dank der Leistungsfähigkeit, Flexibilität und Einfachheit des Track-Elements kommen wir einer offeneren und dynamischeren Gestaltung von Medien im Web einen entscheidenden Schritt näher.

Weitere Informationen

Comments

0