Datenkonverter · 5 Min. gelesen
SRT bis VTT: Untertitel, die der Browser tatsächlich lädt
Ein HTML5-Videoelement ignoriert gerne eine SRT-Datei: Das `<track>` -Element des Browsers lädt WebVTT und nichts anderes. Die Konvertierung von SRT in VTT ist daher ein Routineschritt bei der Veröffentlichung von Videos im Web — und die Unterschiede zwischen den beiden Formaten sind geringer als erwartet, weshalb sich die Konvertierung lohnt, anstatt sie als Blackbox zu behandeln.
Aktualisiert
Was ändert sich zwischen SRT und VTT?
- Der Header – WebVTT-Dateien beginnen mit der Zeile `WEBVTT`, optional mit einem Titel dahinter.
- Timecodes – SRT schreibt `00:00:12,500` mit einem Komma vor Millisekunden; VTT schreibt `00:00:12.500` mit einem Punkt.
- Cue-Bezeichner – beide erlauben einen optionalen Namen über dem Cue; VTT sorgt dafür, dass sie für die Skripterstellung nützlicher bleiben.
- End-Timecodes – erforderlich in SRT; VTT kann ein Ende aus dem nächsten Hinweis ableiten, explizit ist jedoch sicherer.
- Zusätzliche Funktionen – VTT fügt Cue-Einstellungen wie Zeilenposition, Ausrichtung und Textmarkierung hinzu.
Styling und sicheres Markup
WebVTT ermöglicht eine begrenzte Anzahl von Tags in einem Cue — `<b>`, `<i>`, ``<u> und `<c.classname>` für Klassen, die Sie mit CSS über `::cue` gestalten. Alles andere wird eher als wörtlicher Text gerendert. Aus diesem Grund sollte die Konvertierung auch eine einfache Formatierung beibehalten, wenn vorhanden, und das, was das Format nicht ausdrücken kann, fallen lassen, anstatt das Markup in sichtbare spitze Klammern zu verschieben.
WEBVTT
00:00:12.500 --> 00:00:15.000 align:start
That was the point.
Warum es über die Wiedergabe hinaus wichtig ist
Untertitel sind auf den meisten Plattformen eine Barrierefreiheitsanforderung, und sie sind auch indiziertes Material: Eine Textspur gibt Suchmaschinen und Assistenten ein maschinenlesbares Skript, das das Audio allein nicht bietet. Ein korrekt codiertes `<track kind="captions">` erfüllt daher eine doppelte Pflicht — es erfüllt die Compliance und verleiht dem Video eine Textpräsenz, die es sonst nicht haben kann.
Auf die Kodierung kommt es an: Stellen Sie VTT als UTF-8 mit einem geeigneten Zeichensatz bereit. Eine Datei mit Akzentzeichen, die in einer älteren Kodierung gespeichert ist, wird im Player als Mojibake gerendert und sieht eher wie ein Konvertierungsfehler als wie ein Kodierungsfehler aus.
Der praktische Arbeitsablauf
- Wandeln Sie SRT in VTT um und überprüfen Sie den ersten und letzten Cue auf korrekte Timecodes.
- Speichern Sie als UTF-8 mit der Erweiterung .vtt und stellen Sie es mit einem Text/VTT-Inhaltstyp bereit, bei dem Sie den Server steuern.
- Verweisen Sie es aus dem Videoelement mit `<track kind="captions" srclang="en" label="English" default>`.
- Laden Sie die Untertiteldatei zusammen mit der Videodatei hoch, damit die relativen Pfade nach der Bereitstellung weiterhin funktionieren.
Offline und sofort
Bei Untertiteldateien handelt es sich um große Textdokumente und oft um unveröffentlichte Arbeiten – das Drehbuch eines Rezensionsschnitts sollte nirgendwo hochgeladen werden. Der SRT-zu-VTT-Konverter auf dieser Website läuft im Browser, sodass ein zweistündiges Transkript im Bruchteil einer Sekunde konvertiert wird, ohne dass Sie Ihren Computer verlassen müssen.
SRT bis VTT – häufig gestellte Fragen
Warum ignoriert mein Videoplayer meine Untertiteldatei?
Fast immer, weil die Datei SRT und nicht WebVTT ist. HTML5 `<track>` akzeptiert nur VTT. In VTT konvertieren, bestätigen, dass die Datei mit der WEBVTT-Zeile beginnt, und dann überprüfen, ob die Timecodes Punkte und keine Kommas verwenden.
Brauchen YouTube und andere Plattformen VTT?
YouTube akzeptiert sowohl SRT- als auch VTT-Uploads und konvertiert sie intern, aber die meisten selbst gehosteten Player und jedes HTML5-Videoelement benötigen WebVTT. Durch die Konvertierung vor dem Hochladen bleiben die Untertitel überall gleich.
Kann WebVTT gestaltet werden?
Ja – innerhalb von Hinweistexten können Sie die Tags „fett“, „kursiv“ und „unterstrichen“ sowie Klassenspannen verwenden und Klassen mit CSS anhand des Pseudoelements `::cue` formatieren. Die Positionierung wird mit Cue-Einstellungen wie Linie, Position und Ausrichtung gesteuert.
In diesem Beitrag erwähnte Tools
Weitere Artikel zum Lesen
5 Min. gelesen
Markdown Tabellen: Generieren Sie sie, anstatt Rohre zu zählen
Erstellen Sie Markdown-Tabellen mit GitHub-Geschmack aus Zeilen oder Tabellenkalkulationen – Ausrichtung, Escape-Pipes und wann eine Tabelle die falsche Wahl für Ihre README-Datei ist.
6 Min. gelesen
JSON Formatierer: hübsch, minimiert und tatsächlich gültig
Ein JSON-Formatierer, der mit genauen Fehlerpositionen schön druckt, minimiert und validiert – plus die fünf Syntaxfehler, die fast jedem ungültigen JSON-Fehler zugrunde liegen.