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 Screenreader-Beschreibungen hinzufügen möchten, fügen Sie in einem <video>-Tag ein <track>-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 Sie sich auf Glitch ansehen können.
WebVTT-Dateistruktur
Hier ist eine hypothetische WebVTT-Datei für die Demo. Dies ist eine Textdatei mit einer Reihe von Cues. Jeder Cue besteht aus einem Textblock, der auf dem Bildschirm eingeblendet werden soll, und dem Zeitbereich, in dem er eingeblendet werden soll.
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 wie railroad und manuscript haben. 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.
Sie können eine VTT-Datei manuell erstellen, da es viele Dienste gibt, die sie für Sie erstellen.
Wie Sie in unseren vorherigen Beispielen sehen können, 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 als Hintergrund einen grauen, linearen Farbverlauf verwenden, wobei für alle Untertitel die Vordergrundfarbe papayawhip und für alle fett formatierten Text peachpuff verwendet wird.
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 möglicherweise Übersetzungen von Audioinhalten. Geeignet für hörgeschädigte Nutzer und für Fälle, in denen das Video stummgeschaltet ist.subtitles: Für Untertitel, also Übersetzungen von Sprache und Text in eine andere Sprache als die Hauptsprache des Videos.descriptions: Für Beschreibungen visueller Teile des Videoinhalts. Geeignet für sehbehinderte Personen.chapters: Wird angezeigt, wenn sich der Nutzer im Video bewegt.metadata: nicht sichtbar und kann von Skripts 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.