Was ist WebVTT?

WebVTT (Web Video Text Tracks Format) ist ein textbasiertes Untertitelformat, das verwendet wird, um zeitlich synchronisierte Textspuren zu Videos hinzuzufügen. Es ist das offizielle Format, das von HTML5 über das <track>‑Element unterstützt wird und es Ihnen ermöglicht, folgendes hinzuzufügen:

• Untertitel (übersetzte Sprache)
• Untertitel (Sprache und Soundeffekte)
• Beschreibungen (visuelle Informationen für Screenreader)
• Kapitel (navigierbare Punkte im Video)
• Metadaten

Grundstruktur von WebVTT

• Eine WebVTT‑Datei besteht aus:
  • Einem optionalen Header (WEBVTT).
  • Optionalen Metadaten (Kommentare oder Style-/Script‑Blöcke).
  • Cues (Textsegmente mit Zeitangaben und Inhalt).

1. Cue-Format

Ein Cue hat die folgende Struktur:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...

• Timing: Start‑ & Endzeiten im Format HH:MM:SS.mmm.
• Settings (optional):
  • vertical (lr/rl für vertikalen Text)
  • line (Positionierung)
  • position (horizontale Ausrichtung)
  • size (Breite/Prozentualer Wert)
  • align (start/middle/end)

2. Cue-Payload

• Kann einfacher Text sein oder Markup enthalten:
  • Tags: <b>, <i>, <u>, <ruby>, <lang> usw.
  • Zeitstempel (<00:00:05.000>) für Karaoke‑ähnlichen Text.

3. Styling & CSS

• Styling kann angewendet werden über:
  • Inline-Cues (unter Verwendung von Tags).
  • CSS-Pseudo-Elemente (::cue, ::cue-region) in HTML.

4. Metadaten-Spuren

WebVTT kann Metadaten (JSON usw.) für interaktive Anwendungen transportieren.

5. Dateikodierung

Muss UTF-8 kodiert sein.
Zeilen enden mit \r\n, \n oder \r.

6. Verarbeitungsregeln

Parser müssen fehlerhafte Dateien robust verarbeiten.
BOM (Byte Order Mark) ist optional.

7. HTML5-Integration

Verwendet mit dem <track>‑Element:

<video>
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>

• kind kann subtitles, captions, descriptions, chapters oder metadata sein.

8. Browserunterstützung

Weit verbreitet unterstützt in modernen Browsern (Chrome, Firefox, Safari, Edge).

9. Anwendungsfälle

• Untertitel/Beschriftungen für Barrierefreiheit.
• Karaoke-Texte mit zeitlich synchronisiertem Text.
• Kapitelnavigation in Videos.
• Metadaten für interaktive Video‑Apps.

Beispiel einer WebVTT-Datei:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

Suchmaschinen können Ihr Video nicht „anschauen“ – sie können jedoch textbasierte Inhalte lesen. Durch die Verwendung von WebVTT‑Dateien fügen Sie indizierbaren Text hinzu, der:

• Verbessert die Auffindbarkeit: Google kann Untertitel und Transkripte indexieren, sodass Ihre Videos in mehr Suchergebnissen erscheinen.
• Steigert das Engagement: Untertitelte Videos halten Nutzer länger bei der Sache – erhöhen die Sitzungsdauer und reduzieren die Absprungrate.
• Verbessert die Barrierefreiheit: Untertitel sind für gehörlose oder schwerhörige Nutzer unerlässlich und werden von SEO‑Ranking‑Algorithmen bevorzugt.

Wenn eine WebVTT‑Datei mit einem Video auf einer Webseite verknüpft ist, kann Google den zeitlich synchronisierten Text parsen und verstehen, wodurch der Inhalt für bestimmte Anfragen relevanter wird.

Wie man WebVTT zu einem HTML5‑Video hinzufügt

Sie können eine WebVTT‑Datei in Ihr Video einbinden, indem Sie das <track>‑Element verwenden:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: Pfad zu Ihrer .vtt‑Datei
• kind: Typ der Textspur (subtitles, captions, chapters usw.)
• srclang: Sprachcode (z. B. en, es)
• label: Track‑Bezeichnung, die im Player angezeigt wird

WebVTT vs SRT: Was ist der Unterschied?

Werkzeuge zum Erstellen und Bearbeiten von WebVTT-Dateien

Sie können .vtt‑Dateien mit folgenden Programmen erstellen oder bearbeiten:

• Texteditoren: VS Code, Sublime Text
• Untertitel‑Editoren: Subtitle Edit, Amara, Aegisub
• Konverter: Verwenden Sie Werkzeuge, um SRT nach VTT und umgekehrt zu konvertieren

Wie man eine WebVTT‑Datei öffnet?

Um eine WebVTT‑(.vtt)‑Datei zu öffnen, können Sie jeden Texteditor oder Untertitel‑Editor verwenden.

Öffnen in einem Texteditor

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

Da .vtt‑Dateien reiner Text sind, können Sie sie wie jede normale Textdatei ansehen und bearbeiten.

Öffnen in einem Untertitel‑Editor

• Subtitle Edit (Windows)
• Aegisub (plattformübergreifend)
• Amara (webbasiert)

Öffnen in einem Browser

1. Erstellen Sie eine einfache HTML‑Datei mit einem <video>‑ und einem <track>‑Tag.
2. Öffnen Sie die HTML‑Datei in einem Browser, um das Video mit Untertiteln zu sehen.

Schlüsselmerkmale von ASS‑Dateien

FAQ

Q1: Was ist der Unterschied zwischen WebVTT und SRT?

A: WebVTT basiert auf SRT, fügt jedoch entscheidende Funktionen wie Textpositionierung, Stimm‑Tags, CSS‑Styling und Metadaten‑Unterstützung hinzu und ist nativ in HTML5‑Video integriert.

Q2: Wie füge ich WebVTT‑Untertitel zu YouTube hinzu?

A: Laden Sie Ihre .vtt‑Datei beim Hinzufügen von Untertiteln zu Ihrem Video hoch oder nutzen Sie YouTubes automatische Untertitelung und laden Sie die erzeugte WebVTT‑Datei zum Bearbeiten herunter.

Q3: Können WebVTT‑Dateien Bilder enthalten?

A: Die WebVTT‑Spezifikation unterstützt keine eingebetteten Bilder direkt, aber Sie können Metadaten‑Cues mit URLs verwenden und benutzerdefinierte Bilddarstellung via JavaScript implementieren.

Q4: Warum werden meine WebVTT‑Stile nicht angewendet?

A: Prüfen Sie, ob STYLE‑Blöcke vor dem ersten Cue erscheinen, keine Leerzeilen enthalten und das ::cue‑Pseudo‑Element korrekt verwendet wird. Außerdem die Browser‑Kompatibilität überprüfen.

Q5: Funktionieren WebVTT‑Dateien mit Streaming‑Protokollen wie HLS?

A: Ja, HLS (HTTP Live Streaming) unterstützt segmentierte WebVTT‑Dateien für effizientes Streaming von Untertiteln zusammen mit dem Videoinhalt.

Referenzen

• WebVTT: Das Web Video Text Tracks Format