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 gestalten.
<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 referenzierte Inhalte verweist. Bei einem <track>-Tag verweist es auf einen
WebVTT-Datei.
Das Attribut label gibt an, wie ein bestimmter Titel
die in der Benutzeroberfläche identifiziert wurden.
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 eine Leseprobe, in Glitch ansehen.
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 Trackdatei ist ein Cue. Jeder Cue hat eine Startzeit und
Endzeit, getrennt durch einen Pfeil, gefolgt vom Cue-Text. Cues können auch IDs haben, z. B. railroad und manuscript. 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 Zeitangaben werden im Format hours:minutes:seconds.milliseconds angegeben. Das Parsen ist streng.
Die Zahlen müssen also bei Bedarf mit Nullen aufgefüllt sein: Stunden, Minuten und Sekunden.
müssen zwei Ziffern haben (00 für einen Nullwert) und Millisekunden drei Ziffern
Ziffern (000 für den Wert Null). Es gibt einen hervorragenden WebVTT-Validator
Live-WebVTT-Validator, der auf Fehler bei der Zeitformatierung prüft
wie nicht aufeinanderfolgende Zeiten.
Du kannst eine VTT-Datei auch manuell erstellen. Es gibt aber zahlreiche Dienste, die das für dich erledigen.
Wie Sie in unseren vorherigen Beispielen sehen können, ist das WebVTT-Format ziemlich einfach. Fügen Sie einfach Ihre Textdaten und das Timing hinzu.
Was aber, wenn du deine Untertitel an einer anderen Position mit links- oder rechtsbündiger Ausrichtung rendern möchtest? Vielleicht, um die Untertitel an den aktuellen Sprecher anzupassen,
oder Text in der Kamera blockieren. WebVTT definiert dafür Einstellungen,
und vieles mehr direkt im
.vtt-Datei. Beachte, wie die Platzierung der Untertitel definiert wird. Füge dazu nach den Zeitintervalldefinitionen Einstellungen hinzu.
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, ist die WebVTT-Spezifikation eine gute Quelle für erweiterte Beispiele.
Arten von Texttracks
Ist dir das Attribut kind des Elements <track> aufgefallen? Es dient dazu,
in welcher Beziehung der jeweilige Texttrack zum Video steht. Die
Mögliche Werte des Attributs kind sind:
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, die sich von der Hauptsprache des Videos unterscheidet.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 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. Informationen zu Media-Frameworks und dazu, wie Sie damit Ihrer Website Videos hinzufügen und erweiterte Funktionen nutzen können.