|
Inhaltsverzeichnis
|
Für Video- oder Audio-Inhalte, die Sie mit den HTML5-Elementen video bzw. audio einbinden, bietet HTML5 die Möglichkeit an, zusätzliche Spuren (Tracks) zu definieren. Diese gehören nicht zum produzierten Video oder Audio-Track, sondern werden als Textinformation separat hinterlegt. Dadurch eröffnen sich weitreichende Möglichkeiten:
<video src="interview-mit-einem-clown.mp4"> <track kind="subtitles" label="Deutsche Untertitel" src="de-subtitles.vtt" srclang="de" default> <track kind="subtitles" label="English subtitles" src="en-subtitles.vtt" srclang="en"> </video>
Zusätzliche Spuren werden mit Hilfe von track-Elementen definiert. Diese Elemente werden als Standalone-Elemente, also ohne Inhalt und End-Tag, innerhalb eines video- oder audio-Elements notiert, auf das sie sich beziehen. Sie können innerhalb von video- oder audio-Elementen so viele unterschiedliche track-Elemente notieren, wie Sie benötigen. Wie viele solcher Elemente Sie benötigen, hängt davon ab, welche Zusatzfunktionen Sie anbieten möchten.
Die Art der Zusatzfunktion wird im Attribut kind (engl. für Art, Typ) definiert. Hier erlaubt HTML5 folgende feste mögliche Werte:
Mit Hilfe des label-Attributs können Sie bei Tracks, die für den Anwender optional zuschaltbar sein sollen, die Beschriftung der entsprechenden Auswahlmöglichkeit angeben.
Da die eigentlichen Daten, also etwa Untertitel, je nach Umfang der Ressource recht groß werden können, werden diese in eine eigene Datei ausgelagert. Diese Datei wird im Attribut src referenziert. Die Daten sollten im sogenannten WebVTT-Format hinterlegt werden. Wie der Inhalt einer solchen Datei aussehen muss, wird weiter unten beschrieben. Bei der Wertzuweisung an das src-Attribut gelten alle Regeln und Möglichkeiten der Referenzierung.
Mit dem Attribut srclang können Sie die Sprache der Untertitel, Szenenüberschriften usw. angeben. Hintergrund ist, dass einzelne Tracks normalerweise auch sprachspezifisch sind. Bei mehrsprachigen Untertiteln können Sie einfach pro Sprache und Funktion ein track-Element notieren. Als Wert ist bei srclang ein standardisiertes Sprachenkürzel erlaubt, z.B. de für deutsch, en für englisch, fr für französisch, it für italienisch oder es für spanisch. Einzelheiten dazu und eine vollständige Übersicht finden Sie in der Referenz der Sprachenkürzel.
Das Standalone-Attribut default ist dann sinnvoll, wenn Sie eine Reihe konkurrierender track-Elemente notieren, also etwa sieben track-Elemente für Untertitel in sieben Sprachen. Notieren Sie in einer Serie von track-Elementen mit gleichem kind-Attribut nur bei einem dieser track-Elemente das Attribut default, um die jeweilige Spur innerhalb der Art der Zusatzfunktion als Default-Spur zu definieren, also z.B. englische Untertitel als Default, oder italienische Szenenüberschriften, oder deutschsprachige Kategorien.
Obwohl das track-Element für die Daten der Untertitel, Szenenüberschriften usw. kein bestimmtes Dateiformat zwingend vorschreibt, wurde im Zusammenhang mit der HTML5-Spezifikation ein konkretes Format für diesen Zweck entwickelt. Deshalb wird dieses Format empfohlen und wird wohl von Browsern, die das track-Element interpretieren, vorläufig ohne Alternative implementiert. Das Format wird bei der Internet IANA eingereicht und am Ende vermutlich in Form einer RFC dokumentiert sein.
Das VTT in WebVTT steht für Video Text Tracks. WebVTT-Dateien sind einfache Textdateien, die mit jedem Texteditor bearbeitbar sind, der Dateien mit UTF8-Zeichenkodierung abspeichern kann. Denn Inhalte von WebVTT-Dateien sollten von Browsern als UTF8-kodierte Inhalte interpretiert werden. Achten Sie deswegen beim Speichern der Dateien darauf, dass UTF8 als Zeichenkodierung im Editor eingestellt ist. Vergeben Sie als Dateinamenendung .vtt.
WEBVTT
01:24.000 --> 01:26.000
Der Verdächtige erscheint in der Aufzeichnung der Überwachungskamera.
01:32.600 --> 01:34.600
Der Verdächtige stellt seinen Rucksack auf dem Boden ab.
02:16.250 --> 02:18.250
Die Bombe explodiert.
Wir blenden hier aus.
In der ersten Zeile einer WebVTT-Datei wird WebVTT notiert. Danach folgt eine Leerzeile. Im Anschluss daran können Sie beliebig viele sogenannte Cues (dt. Stichwort, Hinweis, Wink, Einsatzzeichen usw.) notieren. So werden die Dateneinheiten für jeden einzelnen Video-Untertitel oder jede Video-Szenenüberschrift bezeichnet.
Jede Cue besteht mindestens aus einer Zeitangabe und einem Text. Die Zeitangabe muss genau das gezeigte Format haben, inklusive der Leerzeichen:
min:sec.millisec —> min:sec.millisec
Die Angabe definiert, wann genau und wie lange der nachfolgende Text als Untertitel, Szenenüberschrift usw. (abhängig vom kind-Attribut im zugehörigen track-Element) eingeblendet werden soll. Der Teil vor dem —> definiert den Zeitpunkt der Einblendung innerhalb des Videos, und der Teil danach den Zeitpunkt der Ausblendung. Jede Zeitangabe muss das angegebene Format genau einhalten. Dazu gehören auch die gezeigten führenden Nullen. Bei der Minutenangabe genügt eine führende Null bei Minutenangaben unter 10. Wenn Sie zu Millisekunden keine Angaben machen möchten, notieren Sie für millisec den Wert 000.
Getrennt durch einen Zeilenumbruch (nicht mehr!) folgt auf die Ein-/Ausblendangabe der gewünschte Videotext. Weitere erzwungene Zeilenumbrüche, so wie im dritten Cue des obigen Beispiels, werden innerhalb des Videotexts berücksichtigt und mit ausgegeben.
Alle Cues müssen jeweils durch eine Leerzeile voneinander getrennt werden.
WEBVTT
NOTE
Das WEBVTT-Format ist noch nicht endgültig spezifiziert.
Es können sich durchaus noch Details ändern.
Cue-437
01:24.000 --> 01:26.800 size:20% align:middle
<c.gelb>Wenn du mir sagst, wer das getan hat, schenke ich dir die Freiheit.</c>
Cue-438
01:32.600 --> 01:34.600
<c.zyan>Du bist der <b>letzte</b>, dem ich irgendwas sage!</c>
Sie können eine spezielle Form von Cue notieren, die als Kommentar-Cue bewertet wird. Ein solcher Block beginnt mit dem Wort NOTE in einer eigenen Zeile. Vor einer Zeile mit dem Wort NOTE muss eine Leerzeile notiert werden. In den Zeilen unmittelbar nach dem Wort NOTE kann Kommentartext notiert werden. Dieser Text sollte von einem VTT-Parser ignoriert werden. Der Text darf selber keine Leerzeilen enthalten.
Jeden einzelnen Cue können Sie mit einem eigenen ID-Namen ausstatten. ID-Namen werden unmittelbar oberhalb der Zeitangaben für die Ein-/Ausblendung in einer eigenen Zeile notiert. Im Beispiel oben sind das die ID-Namen Cue-437 und Cue-438. Diese ID-Namen werden von Browsern als Ankerdefinitionen innerhalb des Videos erkannt und ermöglichen somit z.B. Hyperlinks zu der betreffenden Stelle im Video. Sie müssen deswegen HTML-dokumentweit eindeutig und HTML-konforme IDs sein (siehe dazu Links und Anker).
WebVTT bietet auch Möglichkeiten an, eingeblendete Texte zu formatieren oder mit zusätzlichen semantischen Daten zu versehen. Das geschieht an zwei Stellen: zum einen als Ergänzungsangabe in der Cue-Zeile mit den Zeitangaben zu Ein- und Ausblendung, und zum anderen in Form HTML-Tag-ähnlicher Auszeichnungen im Cue-Bereich für den Text.
Zusätzliche Angaben in der Zeile mit den Zeitangaben zu Ein- und Ausblendung werden als Cue-Settings bezeichnet. Die Angabe erfolgt, durch Leerzeichen getrennt, hinter der Zeitpunktangabe für die Ausblendung. Bei den Cue Settings können Sie angeben, an welcher Position die Cue-Texte eingeblendet werden sollen, und wie sie ausgerichtet werden sollen. Nachfolgende Tabelle beschreibt die Möglichkeiten, die an dieser Stelle vorgesehen sind:
| Setting-Bezeichner | Bedeutung |
|---|---|
| vertical | Richtet den vertikal zu lesenden Text, z.B. fernöstlicher Sprachen mit entsprechender Schreibrichtung, am linken oder rechten Rand des Videos aus. vertical:lr bedeutet linksbündige Ausrichtung, und vertical:rl rechtsbündige Ausrichtung |
| line | 1. ohne Prozentangabe: Richtet Texte mit n Textzeilen Abstand relativ zur eigentlich ersten Textzeile aus. Positive Werte bedeuten n Textzeilen von oben, negative Werte (mit vorangestelltem Minuszeichen) bedeuten n Textzeilen von unten - z.B. line:2 oder line:-3. 2. mit Prozentangabe: Richtet Texte mit n Prozent Abstand relativ zum Rand des Cues aus. Positive Werte bedeuten n Prozent von oben, negative Werte (mit vorangestelltem Minuszeichen) bedeuten n Prozent von unten - z.B. line:10% oder line:-30%. |
| position | Prozentuale Angabe für den Versatz der Anzeige des Cues, bezogen auf die Startecke des Video-Frames, und gemessen an der Breite und Höhe des Video-Frames. Bei von links nach rechts notierten Sprachen ist die obere linke Ecke die Startecke. So bedeutet position:20% in dem Fall so viel wie 20% von der oberen linken Ecke entfernt. |
| size | Anzeigebreite des Cues relativ zur Größe des Video-Frames in Prozent. So bedeutet z.B. size:80% so viel wie 80% der Breite des Video-Frames. |
| align | Ausrichtung des Cue-Textes innnerhalb des Cues. Erlaubt sind die Angaben start (bei von links nach rechts notierten Sprachen bedeutungsgleich mit linksbündig), middle (bei lr-Richtung bedeutungsgleich mit zentriert) und end (bei lr-Richtung bedeutungsgleich mit rechtsbündig). |
HTML-Tag-ähnliche Auszeichnungen im Cue-Bereich für den Text werden als Cue-Components bezeichnet. Das WebVTT-Format definiert eine Reihe erlaubter Markup-Elemente. Notiert werden diese Elemente wie HTML-Auszeichnungen im Cue-Text. Dabei sind auch - sofern sinnvoll - Verschachtelungen der erlaubten Elemente möglich.
| Component-Element | ~Bedeutung |
|---|---|
| c | Weist dem Text eine CSS-Klasse zu. Wird in der Form <c.cssKlassenname>auszuzeichnender Cue-Text</c> notiert. Die CSS-Klasse muss auf der Webseite, die das Video referenziert, direkt oder durch Einbinden einer CSS-Datei definiert sein. |
| i | Zeichnet Text kursiv aus. Wird in der Form <i>kursiver Cue-Text</i> notiert. |
| b | Zeichnet Text als fett aus. Wird in der Form <b>fett geschriebener Cue-Text</b> notiert. |
| u | Zeichnet Text unterstrichen aus. Wird in der Form <u>unterstrichener Cue-Text</u> notiert. |
| v | Weist einem Text ein "Voice-Label", also eine benannte Stimme, zu. Beispiel: <v Stefanie>Sag ich doch!</v>. Das Voice-Label ist nicht sichtbar. Es dient der semantischen Zuordnung, etwa in Filmszenen. |
| ruby | Ermöglicht ähnlich wie das gleichnamige HTML-Element ruby-Annotierung in Cue-Texten. |
(jedoch nur im Zusammenhang mit anderen HTML-Elementen, etwa dem img-Element)
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.