Detaillierter Leitfaden zur WebVTT-Untertitel-Syntax: Ein Entwicklungs- und Debugging-Leitfaden von Zeitstempeln bis zur Gestaltung

Die erste Zeile einer standardmäßigen WebVTT-Datei muss die WEBVTT-Deklaration sein. Auf die Deklaration kann ein Leerzeichen und ein Dateibeschreibungstext folgen, unterschiedliche Strukturblöcke werden durch Leerzeilen getrennt. Die meisten HTML5-Player können Dateien, die keine WEBVTT-Header enthalten, nicht korrekt parsen.

NOTE-Kommentarblöcke werden verwendet, um Entwicklungsanmerkungen oder Untertitelbeschreibungen hinzuzufügen und unterstützen ein- oder mehrzeilige Inhalte. Sie werden von Playern nicht gerendert oder angezeigt. Während der Entwicklung und beim Debuggen können NOTE-Blöcke verwendet werden, um Untertitelabschnitte zu markieren, die bearbeitet werden müssen, ohne das endgültige Wiedergabeergebnis zu beeinträchtigen.

Jeder Untertitel-Cue besteht aus einem Zeitstempel und Anzeigetext. Das Zeitstempelformat unterstützt zwei Arten von Millisekundentrennzeichen: den Punkt und das Komma. Die meisten modernen Browser unterstützen nur die Punkt-Notation.

Das Stundenfeld in Zeitstempeln ist optional. Untertitel mit einer Gesamtdauer von weniger als einer Stunde können das Stundenfeld weglassen, was zum Format MM:SS.sss führt. Das vollständige Format lautet HH:MM:SS.sss. Start- und Endzeit werden durch das Symbol --> getrennt.

WebVTT unterstützt sechs standardmäßige Inline-Tags zur Änderung der Anzeigestilierung von Teiltext. Davon entsprechen b, i und u jeweils fett, kursiv und unterstrichen und folgen den gleichen Regeln wie die entsprechenden HTML-Tags. Entwickler können sie direkt beim manuellen Schreiben verwenden.

Das ruby-Tag wird für Pinyin-Anmerkungen verwendet, das lang-Tag zur Markierung von Text in anderen Sprachen und das voice-Tag zur Kennzeichnung des Sprechers. Diese Tags werden hauptsächlich für die Metadatenklassifizierung verwendet, Player können darauf basierend eine differenzierte Darstellung implementieren.

Das ::cue-Pseudoelement ist ein dediziertes CSS-Pseudoelement, das für WebVTT-Untertitel bereitgestellt wird. Entwickler können dieses Pseudoelement verwenden, um den Standardstil aller Untertitel auf einer Webseite zu ändern, und es unterstützt gängige CSS-Eigenschaften wie Farbe, Schriftart und Hintergrund.

STYLE-Blöcke werden verwendet, um globale oder cue-spezifische Stile innerhalb der WebVTT-Datei zu definieren. REGION-Blöcke werden verwendet, um Untertitel-Darstellungsbereiche zu definieren und unterstützen die gleichzeitige Anzeige unterschiedlicher Untertitel in mehreren Bereichen, was häufig für die nebeneinanderliegende Anzeige von mehrsprachigen Untertiteln verwendet wird.

Das HTML5-track-Element wird verwendet, um externe WebVTT-Untertiteldateien zu importieren. Das kind-Attribut des track-Elements definiert den Untertiteltyp, das fünf mögliche Werte hat: subtitles, captions, descriptions, chapters, metadata.

Davon entsprechen subtitles allgemeinen übersetzten Untertiteln, captions entsprechen Untertiteln für Nutzer mit Hörbeeinträchtigungen, die Umgebungsgeräusch-Anmerkungen enthalten, chapters entsprechen Kapitelnavigation, und metadata speichert Seitenmetadaten und wird nicht angezeigt. Unterschiedliche Player handhaben das kind-Attribut mit differenziertem Verhalten.