Wat is WebVTT?

WebVTT (Web Video Text Tracks Format) is een tekstgebaseerd ondertitelingsformaat dat wordt gebruikt om getimede tekstsporen aan video’s toe te voegen. Het is het officiële formaat dat door HTML5 wordt ondersteund via het <track>‑element, waardoor je kunt toevoegen:

• Ondertitels (vertaalde spraak)
• Bijschriften (spraak en geluidseffecten)
• Beschrijvingen (visuele informatie voor schermlezers)
• Hoofdstukken (navigeerbare punten in de video)
• Metadata

Basisstructuur van WebVTT

• Een WebVTT‑bestand bestaat uit:
  • Een optionele header (WEBVTT).
  • Optionele metadata (commentaar‑ of stijl/script‑blokken).
  • Cues (tekstsegmenten met timing en payload).

1. Cue‑formaat

Een cue heeft de volgende structuur:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...

• Timing: start‑ en eindtijden in HH:MM:SS.mmm‑formaat.
• Instellingen (optioneel):
  • vertical (lr/rl voor verticale tekst)
  • line (positionering)
  • position (horizontale uitlijning)
  • size (breedte/percentage)
  • align (start/middle/end)

2. Cue‑payload

• Kan platte tekst zijn of opmaak bevatten:
  • Tags: <b>, <i>, <u>, <ruby>, <lang>, enz.
  • Tijdstempels (<00:00:05.000>) voor karaoke‑stijl tekst.

3. Styling & CSS

• Styling kan worden toegepast via:
  • Inline cues (met tags).
  • CSS‑pseudo‑elementen (::cue, ::cue-region) in HTML.

4. Metadata‑sporen

• WebVTT kan metadata (JSON, enz.) bevatten voor interactieve toepassingen.

5. Bestandscodering

• Moet UTF-8 gecodeerd zijn.
• Regels eindigen met \r\n, \n of \r.

6. Verwerkingsregels

• Parsers moeten slecht gevormde bestanden gracieus afhandelen.
• BOM (Byte Order Mark) is optioneel.

7. HTML5‑integratie

• Wordt gebruikt met het <track>‑element:

  <video>
    <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
  </video>
  

  • kind kan subtitles, captions, descriptions, chapters of metadata zijn.

8. Browserondersteuning

• Breed ondersteund in moderne browsers (Chrome, Firefox, Safari, Edge).

9. Toepassingsgevallen

• Ondertitels/Bijschriften voor toegankelijkheid.
• Karaoke‑teksten met getimede tekst.
• Hoofdstuknavigatie in video’s.
• Metadata voor interactieve video‑apps.

Voorbeeld van een WebVTT‑bestand:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

Zoekmachines kunnen je video niet “bekijken”, maar ze kunnen tekstgebaseerde inhoud lezen. Door WebVTT‑bestanden te gebruiken, voeg je indexeerbare tekst toe die:

• De vindbaarheid verbetert: Google kan bijschriften en transcripties indexeren, waardoor je video’s in meer zoekresultaten verschijnen.
• Betrokkenheid vergroot: Video’s met ondertiteling houden gebruikers langer vast – wat de sessieduur verhoogt en het bounce‑percentage verlaagt.
• Toegankelijkheid versterkt: Bijschriften zijn essentieel voor doven of slechthorenden en worden beloond door SEO‑ranking‑algoritmen.

Wanneer een WebVTT‑bestand aan een video op een webpagina is gekoppeld, kan Google de getimede tekst parseren en begrijpen, waardoor de inhoud relevanter wordt voor bepaalde zoekopdrachten.

Hoe voeg je WebVTT toe aan een HTML5‑video

Je kunt een WebVTT‑bestand in je video opnemen met het <track>‑element:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: pad naar je .vtt‑bestand
• kind: type tekstspoor (subtitles, captions, chapters, enz.)
• srclang: taalcodes (bijv. en, es)
• label: label van het spoor dat in de speler wordt getoond

WebVTT vs SRT: wat is het verschil?

Tools om WebVTT‑bestanden te maken en te bewerken

Je kunt .vtt‑bestanden maken of bewerken met:

• Teksteditors: VS Code, Sublime Text
• Subtitle‑editors: Subtitle Edit, Amara, Aegisub
• Converters: Gebruik tools om SRT naar VTT te converteren en omgekeerd

Hoe open je een WebVTT‑bestand?

Om een WebVTT‑bestand (.vtt) te openen, kun je elke teksteditor of subtitle‑editor gebruiken.

Openen in een teksteditor

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

Omdat .vtt‑bestanden platte tekst zijn, kun je ze bekijken en bewerken als elk ander tekstbestand.

Openen in een subtitle‑editor

Voor betere opmaak, preview en synchronisatie:

• Subtitle Edit (Windows)
• Aegisub (cross‑platform)
• Amara (web‑gebaseerd)

Openen in een browser

1. Maak een eenvoudig HTML‑bestand met een <video>‑ en <track>‑tag.
2. Open het HTML‑bestand in een browser om de video met ondertiteling te bekijken.

Belangrijkste kenmerken van VTT‑bestanden

FAQ

Q1: Wat is het verschil tussen WebVTT en SRT?

A: WebVTT is gebaseerd op SRT maar voegt cruciale functies toe zoals tekstpositionering, stem‑tags, CSS‑styling en metadata‑ondersteuning, plus native integratie met HTML5‑video.

Q2: Hoe voeg ik WebVTT‑ondertitels toe aan YouTube?

A: Upload je .vtt‑bestand bij het toevoegen van ondertitels aan je video, of gebruik YouTube’s automatische ondertiteling en download het gegenereerde WebVTT‑bestand voor bewerking.

Q3: Kunnen WebVTT‑bestanden afbeeldingen bevatten?

A: De WebVTT‑specificatie ondersteunt geen ingebedde afbeeldingen, maar je kunt metadata‑cues met URL’s gebruiken en aangepaste afbeeldingsweergave via JavaScript implementeren.

Q4: Waarom worden mijn WebVTT‑stijlen niet toegepast?

A: Controleer of STYLE‑blokken vóór de eerste cue staan, geen lege regels bevatten en dat je de ::cue‑pseudo‑element correct gebruikt. Controleer ook de browser‑compatibiliteit.

Q5: Werken WebVTT‑bestanden met streaming‑protocollen zoals HLS?

A: Ja, HLS (HTTP Live Streaming) ondersteunt gesegmenteerde WebVTT‑bestanden voor efficiënte streaming van bijschriften naast video‑content.

Referenties

• WebVTT: The Web Video Text Tracks Format