Hva er WebVTT?

WebVTT (Web Video Text Tracks Format) er et tekstbasert undertekstformat som brukes til å legge til tidsbestemte tekstspor i videoer. Det er det offisielle formatet som støttes av HTML5 via <track>‑elementet, og lar deg legge til:

• Undertekster (oversatt tale)
• Bildetekster (tale og lydeffekter)
• Beskrivelser (visuell informasjon for skjermlesere)
• Kapittel (navigerbare punkter i videoen)
• Metadata

Grunnleggende struktur for WebVTT

• En WebVTT‑fil består av:
  • Et valgfritt header (WEBVTT).
  • Valgfri metadata (kommentarer eller stil‑/script‑blokker).
  • Cues (tekstsegmenter med tidsangivelse og innhold).

1. Cue‑format

En cue har følgende struktur:

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

• Tidsangivelse: Start‑ og sluttider i HH:MM:SS.mmm‑format.
• Innstillinger (valgfritt):
  • vertical (lr/rl for vertikal tekst)
  • line (posisjonering)
  • position (horisontal justering)
  • size (bredde/prosent)
  • align (start/middle/end)

2. Cue‑innhold

Kan være ren tekst eller inneholde markup:

• Tagger: <b>, <i>, <u>, <ruby>, <lang> osv.
• Tidsstempler (<00:00:05.000>) for karaoke‑stil tekst.

3. Styling og CSS

Styling kan påføres via:

• Inline cues (ved bruk av tagger).
• CSS‑pseudo‑elementer (::cue, ::cue-region) i HTML.

4. Metadata‑spor

WebVTT kan inneholde metadata (JSON osv.) for interaktive applikasjoner.

5. Filkoding

• Må være kodet i UTF-8.
• Linjer avsluttes med \r\n, \n eller \r.

6. Behandlingsregler

• Parsere må håndtere feilformede filer på en grei måte.
• BOM (Byte Order Mark) er valgfritt.

7. HTML5‑integrasjon

Brukes 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. Nettleserstøtte

Bredt støttet i moderne nettlesere (Chrome, Firefox, Safari, Edge).

9. Bruksområder

• Undertekster/Bildetekster for tilgjengelighet.
• Karaoke‑tekster med tidsbestemt tekst.
• Kapittel‑navigasjon i videoer.
• Metadata for interaktive video‑apper.

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økemotorer kan ikke «se» videoen din—men de kan lese tekstbasert innhold. Ved å bruke WebVTT‑filer legger du til indekserbar tekst som:

• Forbedrer oppdagbarhet: Google kan indeksere bildetekster og transkripsjoner, slik at videoene dine vises i flere søkeresultater.
• Øker engasjement: Undertekstede videoer holder brukerne engasjerte lenger—øker øktvarighet og reduserer avvisningsrate.
• Forbedrer tilgjengelighet: Bildeteksting er viktig for brukere som er døve eller har nedsatt hørsel, og det favoriseres i SEO‑rangeringer.

Når en WebVTT‑fil er knyttet til en video på en nettside, kan Google analysere og forstå den tidsbestemte teksten, noe som gjør innholdet mer relevant for enkelte søk.

Hvordan legge til WebVTT i en HTML5‑video

Du kan inkludere en WebVTT‑fil i videoen din ved å bruke <track>‑elementet:

<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 tekstspor (subtitles, captions, chapters osv.)
• srclang: Språkkode (f.eks. en, es)
• label: Spor‑etikett som vises i spilleren

WebVTT vs SRT: Hva er forskjellen?

Verktøy for å lage og redigere WebVTT‑filer

Du kan lage eller redigere .vtt‑filer ved å bruke:

• Tekstredigerere: VS Code, Sublime Text
• Undertekstredigerere: Subtitle Edit, Amara, Aegisub
• Konverteringsverktøy: Bruk verktøy for å konvertere SRT til VTT og omvendt

Hvordan åpne en WebVTT‑fil?

For å åpne en WebVTT‑fil (.vtt), kan du bruke hvilken som helst tekstredigerer eller undertekstredigerer.

Åpne i en tekstredigerer

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

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

Åpne i en undertekstredigerer

• Subtitle Edit (Windows)
• Aegisub (tverrplattform)
• Amara (nettbasert)

Åpne i en nettleser

1. Lag en enkel HTML‑fil med et <video>‑ og <track>‑tagg.
2. Åpne HTML‑filen i en nettleser for å se videoen med undertekster.

Viktige egenskaper ved ASS‑filer

FAQ

Q1: Hva er forskjellen mellom WebVTT og SRT?
A: WebVTT er basert på SRT, men legger til viktige funksjoner som tekstposisjonering, stemmetagger, CSS‑styling og metadata‑støtte, samt innebygd integrasjon med HTML5‑video.

Q2: Hvordan legger jeg til WebVTT‑undertekster på YouTube?
A: Last opp .vtt‑filen når du legger til undertekster på videoen, eller bruk YouTubes automatiske bildeteksting og last ned den genererte WebVTT‑filen for redigering.

Q3: Kan WebVTT‑filer inneholde bilder?
A: WebVTT‑spesifikasjonen støtter ikke direkte innebygde bilder, men du kan bruke metadata‑cues med URL‑er og implementere egendefinert bilderepresentasjon via JavaScript.

Q4: Hvorfor fungerer ikke WebVTT‑stilene mine?
A: Sjekk at STYLE‑blokker vises før den første cue, ikke inneholder tomme linjer, og bruker ::cue‑pseudo‑elementet korrekt. Verifiser også nettleserkompatibilitet.

Q5: Fungerer WebVTT‑filer med strømningsprotokoller som HLS?
A: Ja, HLS (HTTP Live Streaming) støtter segmenterte WebVTT‑filer for effektiv strømming av bildetekster sammen med videoinnhold.

Referanser

• WebVTT: Web Video Text Tracks‑formatet