Verbesserung der Videozugänglichkeit mit WebVTT

„Die Macht des Webs liegt in seiner Universalität. Der Zugang für alle, unabhängig von einer Behinderung, ist ein wesentlicher Aspekt.“
– Tim Berners-Lee

Barrierefreiheit ist ein wichtiges Element der Webentwicklung, und angesichts der immer weiter zunehmenden Verbreitung von Videoinhalten wächst auch die Notwendigkeit von Inhalten mit Untertiteln. WebVTT ist eine Technologie, die bei Inhalten mit Untertiteln hilft, da sie ein Untertitelformat darstellt, das sich leicht in bereits vorhandene Web-APIs integrieren lässt.

Darauf werden wir hier in diesem Artikel eingehen. Sicher, WebVTT ist im Grunde die grundlegendste Form der Untertitelung, aber es gibt Möglichkeiten, es so zu implementieren, dass Videos (und die Untertitel selbst) für Benutzer zugänglicher werden.

Hallo, lernen Sie das WebVTT-Format kennen

Zuallererst: WebVTT ist eine Art von Datei, die den Text „WebVTT“ und Zeilen von Untertiteln mit Zeitstempeln enthält. Hier ist ein Beispiel

WEBVTT

00:00:00.000 --> 00:00:03.000
- [Birds chirping]
- It's a beautiful day!

00:00:04.000 --> 00:00:07.000
- [Creek trickling]
- It is indeed!

00:00:08.000 --> 00:00:10.000
- Hello there!

Ein wenig seltsam, aber ziemlich sinnvoll, oder? Wie Sie sehen können, ist die erste Zeile „WEBVTT“ und gefolgt von einem Zeitbereich (in diesem Fall von 0 bis 3 Sekunden) in Zeile 3. Der Zeitbereich ist erforderlich. Andernfalls funktioniert die WEBVTT-Datei überhaupt nicht und es werden nicht einmal Fehler angezeigt oder protokolliert, um Sie darüber zu informieren. Schließlich stellt jede Zeile unter einem Zeitbereich die Untertitel dar, die in diesem Bereich enthalten sind.

Beachten Sie, dass Sie mehrere Untertitel in einem einzigen Zeitbereich haben können. Bindestriche können verwendet werden, um den Beginn einer Zeile zu kennzeichnen, obwohl dies nicht erforderlich ist und eher stilistischer Natur ist.

Der Zeitbereich kann eines von zwei Formaten haben: hh:mm:ss.tt oder mm:ss.tt. Jeder Teil folgt bestimmten Regeln

• Stunden (hh): Mindestens zwei Ziffern
• Minuten (mm): Zwischen 00 und 59, einschließlich
• Sekunden (ss): Zwischen 00 und 59, einschließlich
• Millisekunden (tt): Zwischen 000 und 999, einschließlich

Das mag auf den ersten Blick einschüchternd wirken. Sie fragen sich wahrscheinlich, wie von jemandem erwartet werden kann, dies alles von Hand einzugeben und zu bearbeiten. Glücklicherweise gibt es Werkzeuge, die dies erleichtern. Zum Beispiel kann YouTube Videos automatisch mit Spracherkennung untertiteln und Ihnen zusätzlich erlauben, die Untertitel als VTT-Datei herunterzuladen! Aber das ist noch nicht alles. WebVTT kann auch mit YouTube verwendet werden, indem Sie Ihre VTT-Datei auf Ihr YouTube-Video hochladen.

Sobald diese Datei erstellt ist, können wir sie in ein HTML5-Videoelement einbetten.

<video autoplay="autoplay" controls="controls" width="300" height="150">
  <source src="your_video.mp4" type="video/mp4">
  <track default="" kind="captions" srclang="en" label="English" src="your_caption_file.vtt">
</video>

Das -Tag ist so etwas wie ein Skript, das zusammen mit dem Video „abgespielt“ wird. Wir können mehrere Spuren im selben Videoelement verwenden. Das default-Attribut gibt an, dass die Spur automatisch aktiviert wird.

Lassen Sie uns alle -Attribute durchgehen, während wir schon dabei sind

• srclang gibt an, in welcher Sprache die Spur vorliegt.
• kind stellt die Art der Spur dar, und es gibt fünf Arten
  • subtitles sind in der Regel Übersetzungen und Beschreibungen verschiedener Teile eines Videos.
  • descriptions helfen sehbehinderten Benutzern zu verstehen, was in einem Video passiert.
  • captions bieten hörbehinderten Benutzern eine Alternative zum Audio.
  • metadata ist eine Spur, die von Skripten verwendet wird und für Benutzer nicht sichtbar ist.
  • chapters helfen bei der Navigation durch Videoinhalte.
• label ist ein Titel für die Textspur, der in der Untertitelspur angezeigt wird.
• src ist die Quelldatei für die Spur. Sie kann nicht von einer Cross-Origin-Quelle stammen, es sei denn, crossorigin ist angegeben.

Obwohl WebVTT speziell für Videos entwickelt wurde, können Sie es auch mit Audio verwenden, indem Sie eine Audiodatei in ein <video>-Element einfügen.

Tauchen wir in die Struktur einer WebVTT-Datei ein

MDN hat eine hervorragende Dokumentation und beschreibt die Body-Struktur einer WebVTT-Datei, die aus bis zu sechs Komponenten besteht. So gliedert MDN dies auf:

• Eine optionale Byte Order Mark (BOM)
• Der String „WEBVTT“
• Ein optionaler Text-Header rechts von WEBVTT.
  • Nach WEBVTT muss mindestens ein Leerzeichen stehen.
  • Dies könnte verwendet werden, um eine Beschreibung der Datei hinzuzufügen.
  • Im Text-Header sind alle Zeichen erlaubt, außer Zeilenumbrüchen oder dem String „-->“.
• Eine Leerzeile, die zwei aufeinanderfolgenden Zeilenumbrüchen entspricht.
• Null oder mehr Cues oder Kommentare.
• Null oder mehr Leerzeilen.

Hinweis: Ein BOM ist ein Unicode-Zeichen, das die Unicode-Kodierung der Textdatei angibt.

Fett, kursiv und unterstrichen – oh mein!

Wir können absolut einige Inline-HTML-Formatierungen in WebVTT-Dateien verwenden! Dies sind die, die jeder kennt: <b>, <i> und <u>. Sie verwenden sie genau wie in HTML.

WEBVTT

00:00:00.000 --> 00:00:03.000 align:start
This is <b>bold text</b>

00:00:03.000 --> 00:00:06.000 align:middle
This is <i>italic text</i>

00:00:06.000 --> 00:00:09.000 vertical:rl align:middle
This is <u>underlined  text</u>

Cue-Einstellungen

Cue-Einstellungen sind optionale Textstrings, die zur Steuerung der Position eines Untertitels verwendet werden. Es ist ein wenig wie das Positionieren von Elementen in CSS, wie das Platzieren von Untertiteln im Video.

Zum Beispiel könnten wir Untertitel rechts von einer Cue-Zeit platzieren, steuern, ob ein Untertitel horizontal oder vertikal angezeigt wird, und sowohl die Ausrichtung als auch die vertikale Position des Untertitels definieren.

Hier sind die verfügbaren Einstellungen.

Einstellung 1: Line

line steuert die Position des Untertitels auf der y-Achse. Wenn vertical angegeben ist (was wir als Nächstes betrachten), gibt line stattdessen an, wo der Untertitel auf der x-Achse angezeigt wird.

Bei Angabe des line-Wertes sind ganze Zahlen und Prozente akzeptable Einheiten. Bei Verwendung einer ganzen Zahl entspricht der Abstand pro Zeile der Höhe (aus horizontaler Sicht) der ersten Zeile. Nehmen wir also an, die Höhe der ersten Zeile des Untertitels beträgt 50px, der Wert für line ist 2 und die Ausrichtung des Untertitels ist horizontal. Das bedeutet, dass der Untertitel 100px (50px mal 2) von oben nach unten positioniert wird, bis zu einem Maximum, das den Koordinaten der Videogrenzen entspricht. Wenn wir eine negative ganze Zahl verwenden, bewegt er sich von unten nach oben, wenn der Wert abnimmt (oder, wenn vertical:lr angegeben ist, bewegen wir uns von rechts nach links und umgekehrt). Seien Sie hier vorsichtig, da es möglich ist, die Untertitel außerhalb des Bildschirms zu positionieren und die Positionierung zwischen den Browsern inkonsistent ist. Mit großer Macht kommt große Verantwortung!

Bei einem Prozentsatz muss der Wert zwischen 0 und 100 % liegen (tut mir leid, keine 200 % Mega-Werte hier). Höhere Werte verschieben den Untertitel von oben nach unten, es sei denn, vertical:lr oder vertical:rl ist angegeben, in welchem Fall sich der Untertitel entsprechend entlang der x-Achse bewegt.

Mit zunehmendem Wert erscheint der Untertitel weiter unten innerhalb der Videogrenzen. Wenn der Wert abnimmt (einschließlich negativer Werte), erscheint der Untertitel weiter oben.

Schwierig vorzustellen ohne Beispiele, richtig? So wird dies in Code übersetzt

00:00:00.000 --> 00:00:03.000 line:50%
This caption should be positioned horizontally in the approximate center of the screen.

00:00:03.000 --> 00:00:06.000 vertical:lr line:50%
This caption should be positioned vertically in the approximate center of the screen.

00:00:06.000 --> 00:00:09.000 vertical:rl line:-1
This caption should be positioned vertically along the left side of the video.

00:00:09.000 --> 00:00:12.000 line:0
The caption should be positioned horizontally at the top of the screen.

Einstellung 2: Vertical

vertical gibt an, dass der Untertitel vertikal angezeigt wird und sich in der durch die line-Einstellung angegebenen Richtung bewegt. Einige Sprachen werden nicht von links nach rechts angezeigt, sondern erfordern eine Anzeige von oben nach unten.

  00:00:00.000 --> 00:00:03.000 vertical:rl
This caption should be vertical.

00:00:00.000 --> 00:00:03.000 vertical:lr
This caption should be vertical.

Einstellung 3: Position

position gibt an, wo der Untertitel auf der x-Achse angezeigt wird. Wenn vertical angegeben ist, gibt position stattdessen an, wo der Untertitel auf der y-Achse angezeigt wird. Es muss ein ganzzahliger Wert zwischen 0 % und 100 % sein, einschließlich.

00:00:00.000 --> 00:00:03.000 vertical:rl position:100%
This caption will be vertical and toward the bottom.

00:00:03.000 --> 00:00:06.000 vertical:rl position:0%
This caption will be vertical and toward the top.

An diesem Punkt bemerken Sie vielleicht, dass line und position den CSS-Flexbox-Eigenschaften für align-items und justify-content ähneln und dass vertical sich wie flex-direction verhält. Ein Trick, um sich WebVTT-Richtungen zu merken, ist, dass line eine Position senkrecht zur Textflussrichtung angibt, während position die Position parallel zur Textflussrichtung angibt. Deshalb bewegt sich line plötzlich entlang der horizontalen Achse und position entlang der vertikalen Achse, wenn wir vertical angeben.

Einstellung 4: Size

size gibt die Breite des Untertitels an. Wenn vertical angegeben ist, wird stattdessen die Höhe des Untertitels festgelegt. Wie andere Einstellungen muss es eine ganze Zahl zwischen 0 % und 100 % sein, einschließlich.

00:00:00.000 --> 00:00:03.000 vertical:rl size:50%
This caption will fill half the screen vertically.

00:00:03.000 --> 00:00:06.000 position:0%
This caption will fill the entire screen horizontally.

Einstellung 5: Align

align gibt an, wo der Text horizontal erscheinen wird. Wenn vertical angegeben ist, steuert er stattdessen die vertikale Ausrichtung.

Die verfügbaren Werte sind: start, middle, end, left und right. Ohne Angabe von vertical entsprechen die Ausrichtungen genau dem, was sie bedeuten. Wenn vertical angegeben ist, werden sie effektiv zu top, middle (vertikal) und bottom. Die Verwendung von start und end im Gegensatz zu left und right ist eine flexiblere Möglichkeit, die Ausrichtung auf dem plaintext-Wert der CSS-Eigenschaft unicode-bidi basieren zu lassen.

Beachten Sie, dass align von vertical:lr oder vertical:rl nicht beeinflusst wird.

WEBVTT

00:00:00.000 --> 00:00:03.000 align:start
This caption will be on the left side of the screen.

00:00:03.000 --> 00:00:06.000 align:middle
This caption will be horizontally in the middle of the screen.

00:00:06.000 --> 00:00:09.000 vertical:rl align:middle
This caption will be vertically in the middle of the screen.

00:00:09.000 --> 00:00:12.000 vertical:rl align:end
This caption will be vertically at the bottom right of the screen regardless of vertical:lr or vertical:rl orientation.

00:00:12.000 --> 00:00:15.000 vertical:lr align:end
This caption will be vertically at the bottom of the screen, regardless of the vertical:lr or vertical:rl orientation.

00:00:12.000 --> 00:00:15.000 align:left
This caption will appear on the left side of the screen.

00:00:12.000 --> 00:00:15.000 align:right
This caption will appear on the right side of the screen.

WebVTT-Kommentare

WebVTT-Kommentare sind Textstrings, die nur beim Lesen des Quelltextes der Datei sichtbar sind, ähnlich wie wir Kommentare in HTML, CSS, JavaScript und anderen Sprachen betrachten. Kommentare können einen Zeilenumbruch enthalten, aber *keine* Leerzeile (die im Wesentlichen zwei Zeilenumbrüche sind).

WEBVTT

00:00:00.000 --> 00:00:03.000
- [Birds chirping]
- It's a beautiful day!

NOTE This is a comment. It will not be visible to anyone viewing the caption.

00:00:04.000 --> 00:00:07.000
- [Creek trickling]
- It is indeed!

00:00:08.000 --> 00:00:10.000
- Hello there!

Wenn die Untertiteldatei analysiert und gerendert wird, ist die hervorgehobene Zeile oben für Benutzer vollständig ausgeblendet. Kommentare können auch mehrzeilig sein.

Es gibt drei sehr wichtige Zeichen/Strings, auf die man achten sollte und die in Kommentaren nicht verwendet werden dürfen: <, & und -->. Alternativ können Sie stattdessen maskierte Zeichen verwenden.

Nicht erlaubt	Alternative
ANMERKUNG PB&J	ANMERKUNG PB&J
ANMERKUNG 5 < 7	ANMERKUNG 5 < 7
ANMERKUNG Puppy --> Dog	ANMERKUNG Puppy --> Do

Einige weitere interessante WebVTT-Funktionen

Wir werden uns kurz einige wirklich nette Möglichkeiten ansehen, wie wir Untertitel anpassen und steuern können, denen aber zum Zeitpunkt der Erstellung dieses Artikels die konsistente Browserunterstützung fehlt.

Ja, wir können Untertitel gestalten!

WebVTT-Untertitel können tatsächlich gestaltet werden. Um beispielsweise den Hintergrund eines Untertitels rot zu gestalten, setzen Sie die Hintergrundeigenschaft für das Pseudoelement ::cue

video::cue {
  background: red;
}

Erinnern Sie sich, wie wir einige Inline-HTML-Formatierungen in der WebVTT-Datei verwenden können? Nun, wir können diese auch auswählen. Zum Beispiel, um ein kursives Element (<i>) auszuwählen

video::cue(i) {
  color: yellow;
}

Es stellt sich heraus, dass WebVTT-Dateien einen Stilblock unterstützen, ähnlich wie HTML-Dateien

WEBVTT

STYLE
::cue {
  color: blue;
  font-family: "Source Sans Pro", sans-serif;
}

Elemente können auch über ihre Cue-Identifikatoren abgerufen werden. Beachten Sie, dass Cue-Identifikatoren denselben Escape-Mechanismus wie HTML verwenden.

WEBVTT

STYLE
::cue(#middle\ cue\ identifier) {
  text-decoration: underline;
}
::cue(#cue\ identifier\ \33) {
  font-weight: bold;
  color: red;
}

first cue identifier
00:00:00.000 --> 00:00:02.000
Hello, world!

middle cue identifier
00:00:02.000 --> 00:00:04.000
This cue identifier will have an underline!

cue identifier 3
00:00:04.000 --> 00:00:06.000
This one won't be affected, just like the first one!

Unterschiedliche Tag-Typen

Viele Tags können zur Formatierung von Untertiteln verwendet werden. Es gibt eine Einschränkung. Diese Tags können nicht in einem -Element verwendet werden, bei dem das kind-Attribut chapters ist. Hier sind einige Formatierungs-Tags, die Sie verwenden können.

Das Class-Tag

Wir können Klassen in der WebVTT-Markup mit einem Class-Tag definieren, das mit CSS ausgewählt werden kann. Nehmen wir an, wir haben eine Klasse, .yellowish, die Text gelb macht. Wir können das Tag in einem Untertitel verwenden. Auf diese Weise können wir viel Styling kontrollieren, wie Schriftart, Schriftfarbe und Hintergrundfarbe.

/* Our CSS file */
.yellowish {
  color: yellow;
}
.redcolor {
  color: red;
}

WEBVTT

00:00:00.000 --> 00:00:03.000
This text should be yellow. This text will be the default color.

00:00:03.000 --> 00:00:06.000
This text should be red. This text will be the default color.

Das Zeitstempel-Tag

Wenn Sie möchten, dass Untertitel zu bestimmten Zeiten erscheinen, dann möchten Sie Zeitstempel-Tags verwenden. Sie sind wie präzises Einstellen von Untertiteln auf exakte Zeitpunkte. Die Zeit des Tags muss innerhalb des gegebenen Zeitbereichs des Untertitels liegen, und jeder Zeitstempel-Tag muss später als der vorherige sein.

WEBVTT

00:00:00.000 --> 00:00:07.000
This <00:00:01.000>text <00:00:02.000&>will <00:00:03.000>appear <00:00:04.000>over <00:00:05.000>6 <00:00:06.000>seconds.

Das Voice-Tag

Voice-Tags sind praktisch, da sie helfen zu identifizieren, *wer* spricht.

WEBVTT

00:00:00.000 --> 00:00:03.000
How was your day, Bob?

00:00:03.000 --> 00:00:06.000
Great, yours?

Das Ruby-Tag

Das Ruby-Tag ist eine Möglichkeit, kleine, annotative Zeichen über dem Untertitel anzuzeigen.

WEBVTT

00:00:00.000 --> 00:00:05.000
<ruby>This caption will have text above it<rt>This text will appear above the caption.</rt></ruby>

Fazit

Und das war's im Grunde für WebVTT! Es ist eine äußerst nützliche Technologie und bietet eine hervorragende Gelegenheit, die Zugänglichkeit Ihrer Website zu verbessern, insbesondere wenn Sie mit Videos arbeiten. Probieren Sie einige Ihrer eigenen Untertitel aus, um ein besseres Gefühl dafür zu bekommen!