Vad är WebVTT?

WebVTT (Web Video Text Tracks Format) är ett textbaserat undertextformat som används för att lägga till tidsstyrda textspår till videor. Det är det officiella formatet som stöds av HTML5 via <track>‑elementet, vilket låter dig lägga till:

• Undertexter (översatt tal)
• Bildtexter (tal och ljudeffekter)
• Beskrivningar (visuell information för skärmläsare)
• Kapitel (navigerbara punkter i videon)
• Metadata

Grundläggande struktur för WebVTT

• En WebVTT-fil består av:
  • Ett valfritt huvud (WEBVTT).
  • Valfri metadata (kommentarer eller stil-/skriptblock).
  • Cues (textsegment med tidsangivelse och innehåll).

1. Cue-format

En cue har följande struktur:

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

• Tidsangivelse: Start- och sluttider i formatet HH:MM:SS.mmm.
• Inställningar (valfritt):
  • vertical (lr/rl för vertikal text)
  • line (positionering)
  • position (horisontell justering)
  • size (bredd/procent)
  • align (start/mellan/slut)

2. Cue-innehåll

• Kan vara vanlig text eller innehålla markup:
  • Taggar: <b>, <i>, <u>, <ruby>, <lang> osv.
  • Tidsstämplar (<00:00:05.000>) för karaoke‑liknande text.

3. Styling & CSS

• Styling kan tillämpas via:
  • Inline cues (med taggar).
  • CSS pseudo-element (::cue, ::cue-region) i HTML.

4. Metadata-spår

• WebVTT kan bära metadata (JSON osv.) för interaktiva applikationer.

5. Filkodning

• Måste vara kodad i UTF-8.
• Rader avslutas med \r\n, \n eller \r.

6. Bearbetningsregler

• Tolkar måste hantera felaktiga filer på ett smidigt sätt.
• BOM (Byte Order Mark) är valfritt.

7. HTML5-integration

• Används med <track>‑element:

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

  • kind kan vara subtitles, captions, descriptions, chapters eller metadata.

8. Webbläsarstöd

• Brett stöd i moderna webbläsare (Chrome, Firefox, Safari, Edge).

9. Användningsområden

• Undertexter/Bildtexter för tillgänglighet.
• Karaoke-texter med tidsstyrd text.
• Kapitelnavigering i videor.
• Metadata för interaktiva videoappar.

Exempel på en WebVTT-fil:

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.

Sökmotorer kan inte “titta” på din video—men de kan läsa textbaserat innehåll. Genom att använda WebVTT-filer lägger du till indexerbar text som:

• Förbättrar upptäckbarhet: Google kan indexera bildtexter och transkript, vilket gör att dina videor visas i fler sökresultat.
• Ökar engagemang: Videor med undertexter håller användare engagerade längre—vilket ökar sessionens varaktighet och minskar avvisningsfrekvensen.
• Förbättrar tillgänglighet: Bildtexter är viktiga för användare som är döva eller hörselskadade, och de föredras i SEO‑rankningsalgoritmer.

När en WebVTT-fil är kopplad till en video på en webbsida, kan Google tolka och förstå den tidsstyrda texten, vilket gör innehållet mer relevant för vissa sökfrågor.

Så lägger du till WebVTT i en HTML5-video

Du kan inkludera en WebVTT-fil i din video med <track>‑elementet:

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

• src: Sökväg till din .vtt-fil
• kind: Typ av textspår (subtitles, captions, chapters osv.)
• srclang: Språkkod (t.ex. en, es)
• label: Spårets etikett som visas i spelaren

WebVTT vs SRT: Vad är skillnaden?

Verktyg för att skapa och redigera WebVTT-filer

• Textredigerare: VS Code, Sublime Text
• Undertextredigerare: Subtitle Edit, Amara, Aegisub
• Konverterare: Använd verktyg för att konvertera SRT till VTT och vice versa

Hur öppnar man en WebVTT-fil?

För att öppna en WebVTT (.vtt)-fil kan du använda vilken textredigerare eller undertextredigerare som helst.

Öppna i en textredigerare

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

Eftersom .vtt-filer är vanlig text kan du visa och redigera dem som vilken vanlig textfil som helst.

Öppna i en undertextredigerare

• Subtitle Edit (Windows)
• Aegisub (plattformoberoende)
• Amara (webbaserad)

Öppna i en webbläsare

1. Skapa en enkel HTML-fil med ett <video>- och ett <track>-element.
2. Öppna HTML-filen i en webbläsare för att se videon med undertexter.

Nyckelfunktioner för ASS-filer

Vanliga frågor

Q1: Vad är skillnaden mellan WebVTT och SRT?
A: WebVTT är baserat på SRT men lägger till viktiga funktioner som textpositionering, rösttaggar, CSS‑styling och stöd för metadata, samt inbyggd integration med HTML5-video.

Q2: Hur lägger jag till WebVTT-undertexter på YouTube?
A: Ladda upp din .vtt-fil när du lägger till undertexter till din video, eller använd YouTubes automatiska bildtextning och ladda ner den genererade WebVTT-filen för redigering.

Q3: Kan WebVTT-filer innehålla bilder?
A: WebVTT-specifikationen stödjer inte direkt inbäddade bilder, men du kan använda metadata‑cues med URL:er och implementera anpassad bildrendering via JavaScript.

Q4: Varför tillämpas inte mina WebVTT-stilar?
A: Kontrollera att STYLE‑blocken visas före den första cue:n, att de inte innehåller tomma rader och att ::cue‑pseudo‑elementet används korrekt. Verifiera även webbläsarkompatibiliteten.

Q5: Fungerar WebVTT-filer med streamingprotokoll som HLS?
A: Ja, HLS (HTTP Live Streaming) stödjer segmenterade WebVTT-filer för effektiv streaming av bildtexter tillsammans med videoinnehåll.

Referenser

• WebVTT: Web Video Text Tracks-format