WebVTT-fil - Web Video Text Tracks - Hvad er en WebVTT-fil, og hvordan åbner man den?

Hvad er WebVTT?

WebVTT (Web Video Text Tracks Format) er et tekstbaseret undertekstformat, der bruges til at tilføje tidsstyrede tekstspor til videoer. Det er det officielle format, som HTML5 understøtter via <track>‑elementet, så du kan tilføje:

• Undertekster (oversat tale)
• Billedtekster (tale og lydeffekter)
• Beskrivelser (visuel information til skærmlæsere)
• Kapitel (navigerbare punkter i videoen)
• Metadata

Grundlæggende struktur af WebVTT

• En WebVTT-fil består af:
  • En valgfri header (WEBVTT).
  • Valgfri metadata (kommentarer eller stil/script‑blokke).
  • Cues (tekstsegmenter med timing og indhold).

1. Cue-format

Et cue har følgende struktur:

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

• Timing: Start‑ og sluttider i formatet HH:MM:SS.mmm.
• Indstillinger (valgfri):
  • vertical (lr/rl for vertikal tekst)
  • line (positionering)
  • position (horisontal justering)
  • size (bredde/procent)
  • align (start/midten/slut)

2. Cue-indhold

• Kan være ren tekst eller indeholde markup:
  • Tags: <b>, <i>, <u>, <ruby>, <lang> osv.
  • Tidsstempler (<00:00:05.000>) til karaoke‑stil tekst.

3. Styling & CSS

• Styling kan anvendes via:
  • Inline cues (ved brug af tags).
  • CSS pseudo‑elementer (::cue, ::cue-region) i HTML.

4. Metadata‑spor

• WebVTT kan bære metadata (JSON osv.) til interaktive applikationer.

5. Filkodning

• Skal være kodet i UTF-8.
• Linjer afsluttes med \r\n, \n eller \r.

6. Behandlingsregler

• Parsere skal håndtere fejlbehæftede filer på en smidig måde.
• BOM (Byte Order Mark) er valgfri.

7. HTML5‑integration

• Bruges med <track>‑elementet:

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

  • kind kan være subtitles, captions, descriptions, chapters eller metadata.

8. Browser‑understøttelse

• Bredt understøttet i moderne browsere (Chrome, Firefox, Safari, Edge).

9. Anvendelsestilfælde

• Undertekster/Billedtekster for tilgængelighed.
• Karaoke‑tekster med tidsstyret tekst.
• Kapitelnavigation i videoer.
• Metadata til interaktive video‑apps.

Eksempel 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øgemaskiner kan ikke “se” din video—men de kan læse tekstbaseret indhold. Ved at bruge WebVTT-filer tilføjer du indekserbar tekst, som:

• Forbedrer synlighed: Google kan indeksere billedtekster og transskriptioner, så dine videoer vises i flere søgeresultater.
• Øger engagement: Undertekstede videoer holder brugerne engagerede længere—det øger sessionsvarigheden og reducerer afvisningsprocenten.
• Forbedrer tilgængelighed: Billedtekster er afgørende for brugere, der er døve eller hørehæmmede, og de favoriseres i SEO‑rangordningsalgoritmer.

Når en WebVTT-fil er knyttet til en video på en webside, Google kan parse og forstå den tidsstyrede tekst, hvilket gør indholdet mere relevant for visse søgeforespørgsler.

Sådan tilføjes WebVTT til en HTML5‑video

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

• src: Sti til din .vtt‑fil
• kind: Type af tekstspor (subtitles, captions, chapters osv.)
• srclang: Sprogkode (fx en, es)
• label: Spor‑etiket vist i afspilleren

WebVTT vs SRT: Hvad er forskellen?

Værktøjer til at oprette og redigere WebVTT‑filer

• Tekstredigerere: VS Code, Sublime Text
• Undertekstredigerere: Subtitle Edit, Amara, Aegisub
• Konvertere: Brug værktøjer til at konvertere SRT til VTT og omvendt

Sådan åbnes en WebVTT‑fil?

For at åbne en WebVTT (.vtt)‑fil kan du bruge enhver teksteditor eller underteksteditor.

Åbn i en teksteditor

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

Da .vtt‑filer er ren tekst, kan du vise og redigere dem som enhver almindelig tekstfil.

Åbn i en underteksteditor

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

Åbn i en browser

1. Opret en simpel HTML‑fil med et <video>‑ og et <track>‑tag.
2. Åbn HTML‑filen i en browser for at se videoen med undertekster.

Nøglekarakteristika for ASS‑filer

FAQ

Q1: Hvad er forskellen mellem WebVTT og SRT?

A: WebVTT er baseret på SRT, men tilføjer vigtige funktioner som tekstpositionering, stemmetags, CSS‑styling og metadata‑understøttelse samt native integration med HTML5‑video.

Q2: Hvordan tilføjer jeg WebVTT‑undertekster til YouTube?

A: Upload din .vtt‑fil, når du tilføjer undertekster til din video, eller brug YouTubes automatiske billedtekstfunktion og download den genererede WebVTT‑fil til redigering.

Q3: Kan WebVTT‑filer indeholde billeder?

A: WebVTT‑specifikationen understøtter ikke direkte indlejrede billeder, men du kan bruge metadata‑cues med URL’er og implementere brugerdefineret billedrendering via JavaScript.

Q4: Hvorfor anvendes mine WebVTT‑stilarter ikke?

A: Kontroller, at STYLE‑blokke vises før det første cue, indeholder ingen tomme linjer, og at ::cue‑pseudo‑elementet bruges korrekt. Verificér også browser‑kompatibilitet.

Q5: Fungerer WebVTT‑filer med streaming‑protokoller som HLS?

A: Ja, HLS (HTTP Live Streaming) understøtter segmenterede WebVTT‑filer for effektiv streaming af billedtekster sammen med videoinhold.

Referencer

• WebVTT: Web Video Text Tracks-format