WebVTT API

Web Video Text Tracks (WebVTT) sind Textspuren, die spezifische Text-"Cues" bereitstellen, die zeitlich auf andere Medien wie Video- oder Audiospuren abgestimmt sind. Die WebVTT-API bietet Funktionalitäten zum Definieren und Manipulieren dieser Textspuren. Die WebVTT-API wird hauptsächlich zur Anzeige von Untertiteln verwendet, die mit Videoinhalten überlagert werden, hat aber auch andere Verwendungszwecke: Bereitstellung von Kapitelinformationen für eine einfachere Navigation und generische Metadaten, die zeitlich mit Audio- oder Videoinhalten abgestimmt werden müssen.

Konzepte und Verwendung

Eine Textspur ist ein Container für zeitlich abgestimmte Textdaten, die parallel zu einer Video- oder Audiospur wiedergegeben werden können, um eine Übersetzung, Transkription oder Übersicht über den Inhalt bereitzustellen. Ein Video- oder Audiomedienelement kann Spuren verschiedener Arten oder in verschiedenen Sprachen definieren, sodass Benutzer geeignete Spuren entsprechend ihren Vorlieben oder Bedürfnissen anzeigen können.

Die verschiedenen Arten von Textdaten, die angegeben werden können, sind unten aufgelistet. Beachten Sie, dass Browser nicht unbedingt alle Arten von Textspuren unterstützen.

  • subtitles bieten eine textliche Übersetzung des gesprochenen Dialogs. Dies ist der Standardtyp der Textspur, und wenn er verwendet wird, muss die Ausgangssprache angegeben werden.
  • captions bieten eine Transkription des gesprochenen Textes und können Informationen über andere Audioelemente wie Musik oder Hintergrundgeräusche enthalten. Sie sind für hörgeschädigte Benutzer gedacht.
  • chapters bieten Navigation auf hoher Ebene, sodass Benutzer leichter zu relevantem Inhalt wechseln können.
  • metadata wird für alle anderen Arten von zeitlich abgestimmten Informationen verwendet.

Die einzelnen zeitlich abgestimmten Einheiten der Textdaten innerhalb einer Spur werden als "Cues" bezeichnet. Jeder Cue hat eine Startzeit, eine Endzeit und eine texteigene Nutzlast. Er kann auch "Cue-Einstellungen" haben, die seine Anzeigeregion, Position, Ausrichtung und/oder Größe beeinflussen. Schließlich kann ein Cue ein Label haben, das zur Auswahl für CSS-Styling verwendet werden kann.

Eine Textspur und Cues können in einer Datei unter Verwendung des WebVTT-Dateiformats definiert und dann einem bestimmten <video>-Element zugeordnet werden, indem das <track>-Element verwendet wird.

Alternativ können Sie ein TextTrack zu einem Medienelement in JavaScript hinzufügen, indem Sie HTMLMediaElement.addTextTrack() verwenden und dann einzelne VTTCue-Objekte mit TextTrack.addCue() zur Spur hinzufügen.

Das ::cue