HTML-Track-Element erzeugen
Oder Untertiteltext einfügen
Optionen
Untertitel sind für Zuschauer, die den Ton hören können und die Wörter brauchen — eine Übersetzung oder dieselbe Sprache ausgeschrieben. Untertitel für Gehörlose sind für Zuschauer, die ihn nicht hören können, und tragen deshalb auch, was der Ton allen anderen sagt: Musik, eine Tür, ein klingelndes Telefon. Dieselbe Datei kann beiden Zwecken dienen, deshalb fragt die Seite, statt zu raten, und der Wert lässt sich später nicht mehr von innerhalb des Elements ändern. Beschreibungen, Kapitel und Metadaten werden nicht angeboten: Keines davon lässt sich mit dem Inhalt einer Untertiteldatei füllen.
Ein kurzes Sprachkürzel wie en, en-GB oder pt-BR, das die Sprache der Wörter in den Untertiteln nennt, nicht die Sprache des Videos. Eine Spur, die sich Untertitel nennt, muss eine Sprache angeben, daher fällt ein geleertes Feld auf en zurück, statt das Attribut wegzulassen — und weil jedes Attribut in der Ausgabe ausgegeben wird, sehen Sie den Rückfall, bevor Sie etwas einfügen.
Freier Text: Deutsch, Deutsch (SDH), Français. Es ist die Zeile, die ein Zuschauer wählt, wenn eine Seite mehr als eine Spur anbietet, schreiben Sie sie also so, wie Ihr Publikum sie erkennt. Das Leeren des Felds entfernt das Attribut ganz, statt ein leeres zu schreiben, was die Benennung dem Player überlässt; ein leeres Label würde eine namenlose Zeile in dieses Menü setzen.
An erscheinen die Untertitel, sobald das Video läuft. Ein Medienelement darf nur eine Standardspur haben, lassen Sie es also aus, wenn die Seite bereits eine trägt: Eine zweite Spur, die behauptet, die Standardspur zu sein, lässt Player die falsche wählen, während es nur bedeutet, dass der Zuschauer sie selbst einschaltet, wenn sie es nicht ist.
In welcher Bildrate die Zeitangaben gezählt werden. Auf den Formatseiten ist das, was MicroDVD braucht, denn es speichert Zeitangaben als Bildnummern. Auf den Bildraten-Seiten ist es die Rate, gegen die die Datei getaktet wurde — die Fassung, für die die Untertitel erstellt wurden —, und das zweite Feld der Seite nimmt die Rate des Videos auf, mit dem Sie sie verwenden wollen. 23,976, 24, 25, 29,97, 30, 50, 59,94 und 60 sind die üblichen. Ein falscher Wert verschiebt die gesamte Zeitachse, und auf den Bildraten-Seiten verschiebt er sie um einen Faktor statt um einen festen Betrag.
Diese Seite setzt Untertitel in ein einziges HTML-Element, das sich in eine Seite einfügen lässt. Heraus kommt eine track-Zeile, in deren Attribut src die WebVTT direkt eingebettet ist. Der Untertiteltext reist also mit dem Markup selbst: keine zweite Datei zum Hochladen, kein Pfad, der stimmen muss, und kein Player, der nach etwas sucht, das nicht da ist.
Genau diese Einbettung ist der Zweck der Seite, und der Grund liegt in der Art, wie Browser lokale Dateien behandeln. Eine Spur wird nachgeladen, nicht gezeichnet, und ein Browser verweigert dieses Nachladen, wenn die Seite selbst von der Festplatte geöffnet wurde. Ein track-Element mit src=„film.vtt“ zeigt auf einer lokal gespeicherten Seite daher gar nichts: kein Fehler auf dem Bildschirm, ein leeres Untertitelmenü und eine Zeile in der Konsole, die kaum jemand öffnet. Eine data:-URI wird nie nachgeladen – der Text steht im Attribut – und funktioniert dort. Der Preis ist Größe, denn jedes Leerzeichen und jeder Zeilenumbruch der WebVTT wird zu drei Zeichen; dieser Preis ist hier angemessen, weil das Element gerade dafür da ist, allein zu funktionieren.
Die Attribute stammen aus den Feldern des Panels, weil keines davon aus der Datei gelesen werden kann. kind ist das wichtigste: subtitles ist eine Übersetzung für Zuschauer, die dem Ton nicht folgen können, captions ist die vollständigere Fassung, die auch Musik und Geräusche für Zuschauer trägt, die nicht hören können. Eine Datei voller „[door slams]“ und Notenzeichen kann beides sein, und nur der Ersteller weiß, für welches Publikum sie gedacht war – deshalb fragt die Seite, statt zu raten. Die drei anderen Felder sind die Sprache des Textes, der Name im Untertitelmenü des Players und ob die Spur von selbst öffnen soll.
Zwei dieser Felder verhalten sich beim Leeren unterschiedlich, und der Unterschied ist wichtig. Ein geleertes Menüfeld entfernt das Attribut ganz, weil ein Label optional ist und sein Weglassen die Wahl dem Player überlässt. Ein geleertes Sprachfeld tut das nicht: Eine Spur, die sich als subtitles ausgibt, muss eine Sprache nennen, deshalb fällt ein leeres Feld auf en zurück, statt ein Element zu erzeugen, dem eine Pflichtangabe fehlt. Beides ist keine stille Ersetzung – die Ausgabe druckt jedes Attribut, sodass sichtbar ist, was die Felder erzeugt haben.
Der Untertiteltext im Element wird vom selben WebVTT-Schreiber erzeugt, den die Konvertierungsseiten verwenden. Eine Datei, die als WebVTT ankam, behält daher alles außerhalb ihrer Blöcke: den Text der WEBVTT-Zeile, Kommentar- und Stilblöcke und die Einstellungen pro Block, die bestimmen, wo eine Zeile auf dem Bildschirm sitzt. An der Datei wird nichts geändert, und nichts wird hochgeladen; Wörter, Zeiten und Gestaltung verlassen die Seite im Zustand, in dem sie angekommen sind.
Beispiele
Eine SRT-Datei mit den Standardfeldern
Eingabe
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Ausgabe
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Eine Zeile heraus, und die ganze Datei steckt darin: %0A ist ein Zeilenumbruch und %20 ein Leerzeichen, die WebVTT reist also im src-Attribut mit, statt in einer Datei neben der Seite zu liegen. Die vier Attribute sind die vier Felder – die Sprache des Textes, die Zeile im Untertitelmenü des Players und default, wodurch diese Spur von selbst öffnet. Die Blocknummern aus der SRT bleiben als Block-Bezeichner erhalten.
Eine WebVTT-Datei geht als dieselbe WebVTT heraus
Eingabe
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Ausgabe
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Alles, was eine WebVTT-Datei außerhalb ihrer Blöcke enthält, überlebt: der Vermerk auf der WEBVTT-Zeile, der NOTE-Block, der STYLE-Block für das Aussehen im Player, die Namenszeile des Blocks und die Einstellung align:start position:10% (das %25 darin ist ein Prozentzeichen, kodiert, weil ein einzelnes Prozentzeichen in einer URI nicht erlaubt ist). Eine Datei, die als WebVTT kam, geht als dieselbe WebVTT hinaus. Die beiden Felder sagen en-GB und English (UK), weil diese Fassung für britisches Publikum gedacht war – in der Datei stand das nicht.
Untertitel für Zuschauer, die nicht hören können
Eingabe
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Ausgabe
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
Die Datei ist voller Geräusche und Musik, genau wofür kind=captions – Untertitel für Zuschauer, die nicht hören können – gedacht ist, und das lässt sich nur im Feld sagen. Der Menüname wurde außerdem als Tom & „the boss“ getippt und kommt als Tom & "the boss" heraus: Ein nicht maskiertes Anführungszeichen würde das Attribut sofort schließen und den Rest des Namens zu verstümmelten Attributen machen.
Drei Felder geleert oder abgeschaltet
Eingabe
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Ausgabe
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Drei Felder geändert, drei verschiedene Ergebnisse, weil HTML unterschiedliche Dinge verlangt. Der Menüname fehlt ganz – er ist optional, und sein Weglassen überlässt die Entscheidung dem Player. Das Sprachfeld ist leer und erzeugt trotzdem srclang=en: Eine Spur, die sich als subtitles ausgibt, muss eine Sprache nennen, ein leeres srclang gibt es also nicht, und der Rückfall ist in der Ausgabe sichtbar. Der default-Schalter ist aus, auch dieses Attribut fehlt, die Spur öffnet also nicht von selbst – die sichere Richtung, wenn eine Seite mehrere trägt.
Häufige Fragen
Braucht die HTML-Seite mit dem track-Element noch eine .vtt-Datei daneben?
Nein, und das ist der Zweck der Seite. Die WebVTT wird als data:-URI in das src-Attribut geschrieben, das Element trägt seine Untertitel also selbst. Es lässt sich in eine Seite einfügen, mit der Datei verschicken oder in einen anderen Ordner verschieben, und die Untertitel erscheinen weiterhin. Zu beachten ist nur, dass alles ein einziges Attribut ist: Wird nur ein Teil dieser langen Zeile kopiert, ist die URI beschädigt und die Spur bleibt leer.
Funktioniert das Element auch, wenn die HTML-Datei direkt vom Rechner geöffnet wird?
Ja, und genau dieser Fall ist der Grund für die Einbettung. Wird eine Seite von der Festplatte geöffnet, verweigert ein Browser das Nachladen einer separaten Spurdatei, ein Verweis auf film.vtt zeigt also nichts – kein sichtbarer Fehler, nur ein leeres Untertitelmenü. Eine data:-URI wird überhaupt nicht nachgeladen, der Text steht bereits im Attribut, deshalb funktioniert sie auf dem Schreibtisch genauso wie auf einem Server.
Warum ist die Ausgabe viel länger als meine Untertiteldatei?
Weil jedes Zeichen, das kein Buchstabe und keine Ziffer ist, in einer URI zu drei Zeichen wird – ein Leerzeichen ist %20 und ein Zeilenumbruch ist %0A. Aus einer Datei von hundert Kilobyte werden einige hundert. Base64 wäre kürzer, etwa ein Drittel über dem Original statt des Doppelten, aber das Ergebnis wäre eine Wand unlesbarer Zeichen; so lässt sich das src-Attribut ansehen und der eigene Dialog darin wiedererkennen, was die zusätzliche Größe für eine Datei wert ist, die von Hand gepflegt wird.
Warum fehlt das label-Attribut, nachdem das Menüfeld geleert wurde?
Weil ein Menüname in HTML optional ist, und ihn wegzulassen bedeutet nicht „kein Name“, sondern dass der Player entscheidet, was er im Untertitelmenü zeigt – meist die Sprache. Das Leeren des Feldes entfernt das Attribut daher, statt ein leeres zu schreiben, denn label=„“ würde als leere Zeile in diesem Menü erscheinen. Ein Name lässt sich jederzeit wieder eintragen; er ist eine einfache Zeichenkette, und nichts anderes auf der Seite hängt davon ab.
Worin unterscheiden sich subtitles und captions im track-Element?
Darin, für wen sie gedacht sind. subtitles setzt voraus, dass der Zuschauer den Ton hören kann und die Wörter übersetzt oder ausgeschrieben braucht; captions setzt voraus, dass er ihn nicht hören kann, und trägt deshalb auch die Informationen, die ein hörendes Publikum über den Ton erreichen – Musik, Türen, ein klingelndes Telefon. Eine Datei kann beiden Zwecken dienen, und derselbe Text steht in beiden, deshalb kann die Seite nicht erkennen, welcher gemeint ist. Nachträglich lässt sich das im Element nicht ändern, also den Bedarf des Publikums entscheiden lassen.
Welche anderen Spurarten bietet das track-Element hier nicht an?
Drei: descriptions, die das Bild für Zuschauer beschreiben, die es nicht sehen können; chapters, die Navigation sind und keine Untertitel und auf dieser Seite eine eigene Seite haben; und metadata, die niemandem angezeigt werden. Keine der drei lässt sich mit dem Inhalt einer Untertiteldatei füllen, sie anzubieten würde also nur ein Element erlauben, das nichts anzeigt. Die beiden angebotenen Arten sind die beiden, denen eine Untertiteldatei tatsächlich dienen kann.
Wird der Inhalt der Untertitel beim Einbetten in das Element verändert?
Text, Zeiten und Gestaltung bleiben unverändert, und eine WebVTT-Datei behält ihre Kommentar-, Stil- und Regionsblöcke sowie ihre Einstellungen pro Block. Geändert wird die Form: Die Zeilen werden in WebVTT-Syntax neu geschrieben, die Player lesen, deshalb wird aus dem Komma in 00:00:01,000 einer SRT-Datei ein Punkt. Ein Byte fällt bewusst weg – eine führende Markierung, die die Datei als UTF-8 ausweist, weil die data:-URI die Kodierung selbst nennt und die Markierung sonst als drei fremde Zeichen am Anfang erschiene.