Mikä on WebVTT?

WebVTT (Web Video Text Tracks Format) on tekstipohjainen tekstitysformaatti, jota käytetään aikataulutettujen tekstiraitojen lisäämiseen videoihin. Se on HTML5:n <track>-elementin tukema virallinen formaatti, jonka avulla voit lisätä:

• Tekstitykset (käännetty puhe)
• Kuvatekstit (puhe ja ääniefektit)
• Kuvaukset (visuaalinen tieto ruudunlukijoille)
• Luvut (navigoitavat kohdat videossa)
• Metatiedot

WebVTT:n perusrakenne

• WebVTT-tiedosto koostuu:
  • Valinnaisesta otsikosta (WEBVTT).
  • Valinnaisesta metadatasta (kommentit tai tyyli-/skriptiblokit).
  • Vihjeistä (tekstisegmentit ajoituksella ja sisällöllä).

1. Vihjeen formaatti

Vihjeellä on seuraava rakenne:

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

• Ajoitus: Aloitus- ja lopetusaika muodossa HH:MM:SS.mmm.
• Asetukset (valinnainen):
  • vertical (lr/rl pystysuoralle tekstille)
  • line (sijoittelu)
  • position (vaakasuora kohdistus)
  • size (leveys/prosentti)
  • align (alku/keskikohta/loppu)

2. Vihjeen sisältö

• Voi olla pelkkää tekstiä tai sisältää merkintöjä:
  • Tagit: <b>, <i>, <u>, <ruby>, <lang>, jne.
  • Aikaleimat (<00:00:05.000>) karaoketyyliseen tekstiin.

3. Tyylittely & CSS

• Tyylittelyä voidaan käyttää:
  • Sisäkkäisissä vihjeissä (tagien avulla).
  • CSS-pseudoelementeillä (::cue, ::cue-region) HTML:ssä.

4. Metatietoraitat

• WebVTT voi sisältää metatietoja (JSON ym.) interaktiivisia sovelluksia varten.

5. Tiedoston koodaus

• Täytyy olla UTF-8 -koodattu.
• Rivien lopetus on \r\n, \n tai \r.

6. Käsittelysäännöt

• Jäsennysten täytyy käsitellä virheellisiä tiedostoja kohteliaasti.
• BOM (Byte Order Mark) on valinnainen.

7. HTML5-integraatio

• Käytetään <track>-elementin kanssa:

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

• kind voi olla subtitles, captions, descriptions, chapters tai metadata.

8. Selain-tuki

• Laajasti tuettu nykyaikaisissa selaimissa (Chrome, Firefox, Safari, Edge).

9. Käyttötapaukset

• Tekstitykset/kuvatekstit saavutettavuuteen.
• Karaoke-lyriikat ajoitetulla tekstillä.
• Luku-navigointi videoissa.
• Metatiedot interaktiivisiin videosovelluksiin.

Esimerkki WebVTT-tiedostosta:

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.

Hakukoneet eivät voi “katsoa” videoitasi—mutta ne voivat lukea tekstipohjaista sisältöä. Käyttämällä WebVTT-tiedostoja lisäät indeksoitavaa tekstiä, joka:

• Parantaa löydettävyyttä: Google voi indeksoida kuvatekstit ja transkriptiot, jolloin videosi näkyvät useammissa hakutuloksissa.
• Lisää sitoutumista: Tekstitysvideot pitävät käyttäjät pidempään mukana—kasvattaen istunnon kestoa ja vähentäen poistumisprosenttia.
• Parantaa saavutettavuutta: Kuvatekstit ovat välttämättömiä kuuroille tai kuulovammaisille käyttäjille, ja ne otetaan huomioon SEO‑algoritmeissa.

Kun WebVTT-tiedosto liitetään videoon verkkosivulla, Google voi jäsentää ja ymmärtää aikataulutetun tekstin, mikä tekee sisällöstä relevantimpaa tietyille hakukyselyille.

Kuinka lisätä WebVTT HTML5‑videoon

Voit sisällyttää WebVTT‑tiedoston videoon <track>‑elementtiä käyttäen:

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

• src: Polku .vtt‑tiedostoon
• kind: Tekstiraitojen tyyppi (subtitles, captions, chapters jne.)
• srclang: Kielen koodi (esim. en, es)
• label: Raita‑etiketti, joka näytetään soittimessa

WebVTT vs. SRT: Mikä ero on?

Työkalut WebVTT‑tiedostojen luomiseen ja muokkaamiseen

Voit luoda tai muokata .vtt‑tiedostoja käyttäen:

• Tekstieditorit: VS Code, Sublime Text
• Tekstityseditoreita: Subtitle Edit, Amara, Aegisub
• Muuntaimia: Käytä työkaluja muuntamaan SRT VTT:ksi ja päinvastoin

Kuinka avata WebVTT‑tiedosto?

Avaaaksesi WebVTT (.vtt)‑tiedoston, voit käyttää mitä tahansa tekstieditoria tai tekstityseditoria.

Avaa tekstieditorilla

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

Koska .vtt‑tiedostot ovat tavallista tekstiä, voit tarkastella ja muokata niitä kuin mitä tahansa tavallista tekstitiedostoa.

Avaa tekstityseditorilla

Parempaa muotoilua, esikatselua ja synkronointia varten:

• Subtitle Edit (Windows)
• Aegisub (monialustainen)
• Amara (verkkopohjainen)

Avaa selaimessa

1. Luo yksinkertainen HTML‑tiedosto, jossa on <video>‑ ja <track>‑elementti.
2. Avaa HTML‑tiedosto selaimessa nähdäksesi videon tekstityksillä.

ASS‑tiedostojen keskeiset ominaisuudet

Usein kysytyt kysymykset

K1: Mikä ero on WebVTT:n ja SRT:n välillä?

V: WebVTT perustuu SRT:hen, mutta lisää keskeisiä ominaisuuksia kuten tekstin sijoittelu, äänitunnisteet, CSS‑tyylittely ja metatietotuki, sekä natiivin integraation HTML5‑videoon.

K2: Kuinka lisään WebVTT‑tekstitykset YouTubeen?

V: Lataa .vtt‑tiedostosi lisättäessäsi tekstityksiä videoosi, tai käytä YouTuben automaattista kuvatekstitystä ja lataa luotu WebVTT‑tiedosto muokattavaksi.

K3: Voivatko WebVTT‑tiedostot sisältää kuvia?

V: WebVTT‑spesifikaatio ei suoraan tue upotettuja kuvia, mutta voit käyttää metatietovihjeitä URL-osoitteilla ja toteuttaa mukautetun kuvanrenderöinnin JavaScriptin avulla.

K4: Miksi WebVTT‑tyylini eivät tule käyttöön?

V: Varmista, että STYLE‑lohkot esiintyvät ennen ensimmäistä vihjettä, eivät sisällä tyhjiä rivejä ja käyttävät ::cue‑pseudoelementtiä oikein. Tarkista myös selaimen yhteensopivuus.

K5: Toimivatko WebVTT‑tiedostot suoratoistoprotokollien kuten HLS:n kanssa?

V: Kyllä, HLS (HTTP Live Streaming) tukee segmentoitua WebVTT:tä, mikä mahdollistaa tehokkaan kuvatekstien suoratoiston videon ohella.

Lähteet

• WebVTT: Web Video Text Tracks -formaatti