Veröffentlicht: 20. August 2020
Untertitel und Screenreader-Beschreibungen sind die einzige Möglichkeit für viele Nutzer, deine Videos zu sehen. In einigen Gerichtsbarkeiten sind sie sogar gesetzlich oder behördlich vorgeschrieben. Mit dem WebVTT-Format (Web Video Text Tracks) werden getaktete Textdaten wie Untertitel beschrieben, um deine Videos barrierefreier zu machen.
<track>
-Tags hinzufügen
Wenn Sie einem Webvideo Untertitel oder Beschreibungen für Screenreader hinzufügen möchten, fügen Sie ein <track>
-Tag in ein <video>
-Tag ein. Neben Untertiteln und Screenreader-Beschreibungen können <track>
-Tags auch für Untertitel und Kapiteltitel verwendet werden.
Das <track>
-Tag ähnelt dem <source>
-Element, da beide ein src
-Attribut haben, das auf die referenzierten Inhalte verweist. Bei einem <track>
-Tag verweist es auf eine WebVTT-Datei.
Das label
-Attribut gibt an, wie ein bestimmter Titel in der Benutzeroberfläche identifiziert werden kann.
Wenn du Tracks für mehrere Sprachen bereitstellen möchtest, füge jeder WebVTT-Datei, die du angibst, ein separates <track>
-Tag hinzu und gib die Sprache mit dem srclang
-Attribut an.
Sehen wir uns dieses Beispiel für ein <video>
-Tag mit zwei <track>
-Tags an.
Fügen Sie ein <track>
-Element als untergeordnetes Element des <video>
-Elements hinzu.
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
Es gibt auch ein Beispiel, das du auf Glitch ansehen kannst.
WebVTT-Dateistruktur
Hier ist eine hypothetische WebVTT-Datei für die Demo. Dies ist eine Textdatei mit einer Reihe von Cues. Jeder Cue ist ein Textblock, der auf dem Bildschirm angezeigt wird, und der Zeitraum, in dem er angezeigt wird.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Jedes Element in der Titeldatei ist ein Cue. Jeder Cue hat eine Start- und eine Endzeit, die durch einen Pfeil getrennt sind, gefolgt vom Cue-Text. Cues können auch IDs haben, z. B. railroad
und manuscript
. Die einzelnen Cues sind durch eine leere Zeile getrennt.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
Die Cue-Zeiten haben das Format hours:minutes:seconds.milliseconds
. Das Parsen ist streng.
Das bedeutet, dass Zahlen bei Bedarf mit Nullen aufgefüllt werden müssen: Stunden, Minuten und Sekunden müssen zwei Ziffern haben (00 für einen Nullwert) und Millisekunden drei Ziffern (000 für einen Nullwert). Unter Live WebVTT Validator findest du einen hervorragenden WebVTT-Validator, der Fehler bei der Zeitformatierung und Probleme wie nicht sequenzielle Zeiten prüft.
Du kannst eine VTT-Datei auch manuell erstellen. Es gibt aber zahlreiche Dienste, die das für dich erledigen.
Wie du in den vorherigen Beispielen sehen kannst, ist das WebVTT-Format ziemlich einfach. Fügen Sie einfach Ihre Textdaten zusammen mit dem Timing hinzu.
Aber was ist, wenn die Untertitel links- oder rechtsbündig an einer anderen Position gerendert werden sollen? Vielleicht, um die Untertitel an der Position des aktuellen Sprechers auszurichten oder den Text auf der Kamera nicht zu verdecken. WebVTT definiert Einstellungen für diese und weitere Funktionen direkt in der Datei .vtt
. Die Platzierung der Untertitel wird definiert, indem nach den Zeitintervalldefinitionen entsprechende Einstellungen hinzugefügt werden.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Eine weitere praktische Funktion ist die Möglichkeit, Hinweise mit CSS zu formatieren. Vielleicht möchten Sie einen grauen linearen Farbverlauf als Hintergrund verwenden, mit der Farbe papayawhip
für alle Untertitel und der Farbe peachpuff
für fett formatierten Text.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Wenn du mehr über das Stylen und Tagging einzelner Cues erfahren möchtest, findest du in der WebVTT-Spezifikation eine gute Quelle für erweiterte Beispiele.
Arten von Texttracks
Ist Ihnen das kind
-Attribut des <track>
-Elements aufgefallen? Damit wird angegeben, in welcher Beziehung der jeweilige Texttrack zum Video steht. Folgende Werte sind für das Attribut kind
möglich:
captions
: Für Untertitel aus Transkripten und gegebenenfalls Übersetzungen von Audioinhalten. Geeignet für hörgeschädigte Nutzer und für Fälle, in denen das Video stummgeschaltet ist.subtitles
: bei Untertiteln, d. h. Übersetzungen von Sprache und Text in eine Sprache, die von der Hauptsprache des Videos abweicht.descriptions
: Für Beschreibungen visueller Teile des Videoinhalts. Geeignet für sehbehinderte Personen.chapters
: Soll angezeigt werden, wenn der Nutzer im Video navigiert.metadata
: Nicht sichtbar und kann von Scripts verwendet werden.
Nachdem Sie nun die Grundlagen kennen, wie Sie ein Video auf Ihrer Webseite verfügbar und barrierefrei machen, fragen Sie sich vielleicht, wie Sie das bei komplexeren Anwendungsfällen machen. Erfahren Sie mehr über Medien-Frameworks und wie Sie damit Videos zu Ihrer Webseite hinzufügen und gleichzeitig erweiterte Funktionen bereitstellen können.