WebVTT-Untertitel in eine eigenständige HTML-Transkription umwandeln

Eine WebVTT-Datei (.vtt) beginnt mit einer wörtlichen WEBVTT-Kopfzeile und listet danach Cues als Zeitcode-Bereich auf, gefolgt von ein oder zwei Zeilen Untertiteltext. Es ist das Format, das die meisten Meeting-Plattformen, darunter Zoom, Microsoft Teams und die automatischen Untertitel von YouTube, exportieren, wenn du eine Transkription herunterlädst, gebaut, um Untertitel mit Video zu synchronisieren, nicht um als lesbare Webseite für sich zu stehen.

Der VTT-zu-HTML-Konverter von SubToolDesk analysiert die WEBVTT-Kopfzeile und die Cue-Blöcke lokal in deinem Browser, verwirft die Kopfzeile, die Zeitcodes und jegliche Stimm-Tags, setzt die Fragmente zu natürlichen Absätzen zusammen und verpackt das Ergebnis in ein minimales, gültiges HTML-Dokument mit einem <p>-Tag pro Absatz, bereit, direkt in einem Browser geöffnet, auf einem Server gehostet oder in eine statische Website eingefügt zu werden.

So wandelst du VTT in HTML um (Schritt für Schritt)

• Ziehe deine .vtt-Datei auf den Konverter oben, oder klicke auf „Datei hochladen“, um sie auszuwählen.
• Prüfe, dass die automatisch erkannte Format-Badge VTT anzeigt.
• Lasse In Absätze zusammenführen aktiviert für fließenden Text, oder deaktiviere es, um einen Untertitel pro Zeile zu behalten.
• Aktiviere Sprecherkennungen entfernen, wenn dein Meeting-Export jede Zeile mit einem Namen kennzeichnet (üblich bei Zoom und Teams).
• Klicke auf Herunterladen, um eine eigenständige .html-Datei zu speichern.

Warum WebVTT in HTML umwandeln

Eine .vtt-Datei ist dafür gebaut, Untertitel mit einem Videoplayer zu synchronisieren, nicht um als Webseite für sich zu stehen. Sie in HTML umzuwandeln hat fast immer damit zu tun, was die Transkription als Nächstes tun muss:

• Eine Zoom- oder Teams-Meeting-Transkription als interne Wiki-Seite veröffentlichen, die dein Team verlinken, durchsuchen und lesen kann, ohne die Aufnahme erneut zu öffnen.
• Die Untertitel einer Schulung in eine Dokumentationswebsite einfügen, als eigenständige Seite, ohne zusätzlichen Build-Schritt.
• Eine Transkription als Link statt als .vtt-Anhang teilen, den die meisten Menschen gar nicht sinnvoll zu öffnen wüssten.
• Die Transkription passend zu einem Intranet oder einer Website stylen, da einfache, semantische <p>-Tags ein Stylesheet aufnehmen können; rohes VTT kann das nicht.
• Den Inhalt eines untertitelten Videos crawlbar und zugänglich machen, als eigene lesbare Seite für Menschen, die lieber lesen als schauen.
• Eine Meeting-Transkription als Seite archivieren, die sich auch lange nach dem Verschwinden der Aufnahme selbst noch korrekt in jedem Browser öffnet.

Was tatsächlich in der HTML-Datei steckt

Es ist ein vollständiges, minimales HTML-Dokument: eine <!DOCTYPE html>-Deklaration, ein <head> mit UTF-8-Zeichensatz und einem Seitentitel, und ein <body>, das ein <p>-Element pro Absatz enthält. Weder die WEBVTT-Kopfzeile noch Stimm-Tags noch Cue-Einstellungen überleben in die Ausgabe, nur semantisches Markup, das du so öffnen oder in eine größere Seite einfügen und mit eigenem CSS stylen kannst.

Vorher und nachher: ein echtes Beispiel

Ein kurzer Export im Zoom-Stil, mit Stimm-Tags, Cue-Einstellungen, einem NOTE-Block und allem Drum und Dran, umgewandelt mit aktiviertem In Absätze zusammenführen, Sprecherkennungen entfernen und Formatierungs-Tags entfernen (der Standardzustand auf dieser Seite):

WEBVTT

NOTE
Transkript erstellt von Zoom

00:00:01.200 --> 00:00:03.900 align:start position:10%
<v Jordan>Hallo zusammen, danke, dass ihr heute beim Anruf dabei seid.

00:00:03.900 --> 00:00:06.450
<v Priya>Klar! Fangen wir an.

00:00:06.450 --> 00:00:09.800
<v Jordan>Super, als Erstes auf der Agenda steht die Roadmap für das dritte Quartal.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Transkription</title>
</head>
<body>
<p>Hallo zusammen, danke, dass ihr heute beim Anruf dabei seid. Klar! Fangen wir an. Super, als Erstes auf der Agenda steht die Roadmap für das dritte Quartal.</p>
</body>
</html>

Die WEBVTT-Kopfzeile, der NOTE-Block, jede Zeitstempel-Zeile und Cue-Einstellung, sowie beide <v Jordan>-Stimm-Tags sind verschwunden. Was bleibt, ist gültiges, minimales Markup mit dem gesprochenen Dialog, eingepackt in ein einziges <p>-Element, bereit, in jedem Browser geöffnet zu werden.

Warum HTML statt reinem Text?

Eine Textdatei braucht etwas anderes, um sie sinnvoll zu öffnen; eine HTML-Datei öffnet sich direkt in jedem Browser mit bereits korrektem Absatzabstand. Das zählt, wenn eine Meeting- oder Interview-Transkription im Web existieren muss, etwa veröffentlicht in einem internen Wiki, einer Dokumentationswebsite, oder als Link statt als Anhang geteilt.

Datenschutz durch Architektur, nicht durch Richtlinie

Eine Meeting-Transkription ist oft die sensibelste Datei im Raum. Das Analysieren des VTT und das Erstellen der HTML-Datei finden beide in JavaScript statt, das in deinem Browser-Tab läuft. Es gibt keinen Upload-Endpunkt, den diese Funktion ansteuern könnte.

Häufige Anwendungsfälle für VTT zu HTML

• Interne Wiki-Seiten: veröffentliche eine Zoom- oder Teams-Meeting-Transkription als Seite, die dein Team verlinken, durchsuchen und lesen kann, ohne die Originalaufnahme zu öffnen.
• Dokumentationswebsites: verwandle die Untertitel einer aufgezeichneten Schulung in eine eigenständige HTML-Seite, die in den Inhaltsordner eines statischen Website-Generators passt.
• Öffentliche Transkript-Archive: biete eine lesbare, crawlbare HTML-Transkription neben einem veröffentlichten Video an, für SEO und Barrierefreiheit.
• Schnelle lokale Ansicht: öffne die heruntergeladene Datei direkt aus deinem Dateisystem in jedem Browser, ohne Server.

Randfälle, die der Parser abdeckt

Der Parser verwirft die WEBVTT-Kopfzeile und überspringt NOTE-, STYLE- und REGION-Metadatenblöcke, die manche Exporte enthalten. Zeichen, die sonst gültiges HTML brechen würden, wie ein wörtliches &, < oder >, das im bereinigten Dialogtext verbleibt, werden automatisch escaped, sodass die Ausgabe immer gültiges Markup ist.

Was dieser Konverter erhält und was er entfernt

Erhalten bleibt:

• Jedes Wort des gesprochenen Dialogtexts, in seiner ursprünglichen Reihenfolge und Zeichensetzung.
• Die Absatzstruktur, jetzt als echte <p>-Elemente, entweder eines pro ursprünglichem Cue, oder satzbasierte Absätze, wenn In Absätze zusammenführen aktiviert ist.
• Ein gültiges, vollständiges HTML-Dokument, Doctype, UTF-8-Kopf und Body, sodass die Datei in jedem Browser korrekt öffnet.

Entfernt wird:

• Die WEBVTT-Kopfzeile und NOTE-, STYLE- und REGION-Metadatenblöcke.
• Cue-Kennungszeilen, jeder Zeitstempel-Bereich und Cue-Einstellungen wie align:start position:10%.
• Stimm-Tags wie <v Sprechername>, wenn Formatierungs-Tags entfernen aktiviert ist.
• Sprecherpräfixe in reinem Text wie Jordan:, wenn Sprecherkennungen entfernen aktiviert ist.
• Jegliches CSS, Skript oder Styling, es wird keines hinzugefügt und auch keines aus der Quelle übernommen.

Häufige Probleme und wie man sie löst

• Die heruntergeladene Datei öffnet mit sichtbaren Zeitstempeln oder -->-Pfeilen: prüfe, ob die Format-Badge über dem Konverter VTT anzeigt, nicht Unknown; ein stark abgeschnittener Einfügevorgang kann die Cue-Erkennung stören.
• <v Sprechername>-Tags sind noch innerhalb der Absätze sichtbar: aktiviere Formatierungs-Tags entfernen, es ist nur dann deaktiviert, wenn du es geändert hast.
• Sprechernamen in reinem Text wie Jordan: stehen weiterhin vor Zeilen im HTML: das ist ein eigener Schalter, Sprecherkennungen entfernen, aktiviere auch diesen, da er ein anderes Muster erfasst als das Entfernen der Stimm-Tags oben.
• Die gesamte Transkription wird als ein einziger Absatz dargestellt: erwartet, sobald viele kurze, häufige Cues zusammengeführt werden; deaktiviere In Absätze zusammenführen, um statt dessen ein <p> pro ursprünglichem Cue zu erhalten.
• Akzentbuchstaben oder nicht-englischer Text erscheinen als verstümmelte Zeichen wie é: die Quell-.vtt wurde nicht als UTF-8 gespeichert; exportiere oder speichere sie erneut als UTF-8 und lade sie neu hoch.
• Du willst, dass die Transkription zum Look deiner Website passt: der Konverter fügt bewusst kein CSS hinzu; ergänze einen <link> zu deinem eigenen Stylesheet im <head>, oder füge die <p>-Absätze in eine bestehende Seite ein.

Was dieses Werkzeug bewusst nicht tut

Es fügt kein CSS-Styling, keine Layout-Vorlage und kein Branding hinzu, die Ausgabe ist bewusst minimal gehalten, damit sie sich sauber in jede Website oder jedes Stylesheet einfügt, das du bereits hast. Es korrigiert auch keine Transkriptionsfehler, die in der Quell-Untertiteldatei bereits vorhanden sind; es formatiert und verpackt, was da ist, es schreibt es nicht um.