In diesem Artikel erfahren Sie mehr über das WebVTT-Format (Web Video Text Tracks), wird verwendet, um zeitgesteuerte Textdaten wie Untertitel zu beschreiben. um Videos für dein Publikum zugänglicher zu machen.
Barrierefreiheit ist nicht mit Zuckerguss. Es ist nie etwas, das man auf einem in der Hoffnung, es später einzuführen. Untertitel und Screenreader sind Beschreibungen die einzige Möglichkeit, wie viele Nutzer deine Videos erleben können. sind sie sogar gesetzlich vorgeschrieben.
<track>-Tags hinzufügen
Wenn Sie einem Webvideo Untertitel oder Screenreader-Beschreibungen hinzufügen möchten, fügen Sie einen <track> hinzu.
-Tag in einem <video>-Tag einfügen. Neben Untertiteln und Screenreadern
Beschreibungen verwenden, können <track>-Tags auch für Untertitel und Kapiteltitel verwendet werden.
Anhand des <track>-Tags können Suchmaschinen auch die Inhalte eines Videos besser einordnen.
Diese Funktionen werden in diesem Artikel jedoch nicht behandelt.
Das <track>-Tag ähnelt dem <source>-Element insofern, als beide ein src 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 Titel für mehrere Sprachen angeben möchtest, musst du für jede ein separates <track>-Tag hinzufügen.
WebVTT-Datei, die Sie zur Verfügung stellen, und geben Sie die Sprache mithilfe der srclang an.
.
Unten sehen Sie ein Beispiel für ein <video>-Tag mit zwei <track>-Tags. Es gibt auch einen
Beispiel, das Sie sich auf Glitch ansehen können (Quelle)
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>
WebVTT-Dateistruktur
Unten finden Sie eine hypothetische WebVTT-Datei für die oben verlinkte Demo. Die Datei ist eine Textdatei mit einer Reihe von Cues. Jeder Cue ist ein Textblock, der angezeigt werden soll. und den Zeitraum, in dem sie 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 Trackdatei wird als Cue bezeichnet. Jeder Cue hat eine Startzeit und
Endzeit, getrennt durch einen Pfeil, mit Cue-Text in der Zeile darunter. Cues können
optional auch IDs wie railroad und manuscript im folgenden Beispiel haben.
Cues werden 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.
Sie können eine VTT-Datei manuell erstellen. Da es viele Dienste gibt, und erstellen sie für Sie.
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.
Wie sieht es jedoch aus, wenn die Untertitel
an einer anderen Stelle angezeigt werden sollen,
linksbündig oder rechtsbündig? Vielleicht werden die Untertitel an den aktuellen Sprecher angepasst.
oder Text in der Kamera blockieren. WebVTT definiert dafür Einstellungen,
und vieles mehr direkt in der
.vtt-Datei. Beachte, wie die Platzierung der Untertitel definiert wird, indem du
nach den Zeitintervalldefinitionen.
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, Cues mithilfe von CSS zu gestalten. Vielleicht möchten Sie
wird ein grauer linearer Farbverlauf als Hintergrund verwendet, wobei die Vordergrundfarbe
papayawhip für alle Untertitel und alle fett formatierten Texte peachpuff.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Wenn Sie mehr über die Gestaltung und das Tagging von ist die WebVTT-Spezifikation eine gute Quelle für erweiterte Beispiele.
Arten von Text-Tracks
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 möglicherweise Übersetzungen Audioanzeigen. Geeignet für hörgeschädigte Personen und in Fällen, in denen das Video wird stumm geschaltet.subtitles: Bei Untertiteln, d. h. Übersetzungen von Sprache und Text, die sich von der Hauptsprache des Videos unterscheidet.descriptions: Zur Beschreibung der visuellen Teile des Videoinhalts. Für Menschen mit Sehbehinderung geeignet.chapters: Soll angezeigt werden, wenn der Nutzer innerhalb des Video.metadata: nicht sichtbar und kann von Skripts verwendet werden.
Sie kennen jetzt die Grundlagen, um Videos verfügbar und barrierefrei zu machen. auf Ihrer Webseite stellen, fragen Sie sich vielleicht, welche komplexeren Anwendungsfälle es gibt. Als Nächstes werden Sie Informieren Sie sich über Media-Frameworks und darüber, wie Sie damit Videos auf Ihrer Webseite hochladen und gleichzeitig erweiterte Funktionen nutzen.