Ce este WebVTT?

WebVTT (Web Video Text Tracks Format) este un format de subtitrări bazat pe text utilizat pentru a adăuga piste de text sincronizate la videoclipuri. Este formatul oficial suportat de HTML5 prin elementul <track>, permițând adăugarea de:

• Subtitrări (vorbire tradusă)
• Legende (vorbire și efecte sonore)
• Descrieri (informații vizuale pentru cititoarele de ecran)
• Capitole (puncte navigabile în videoclip)
• Metadate

Structura de bază a WebVTT

• Un fișier WebVTT este format din:
  • Un antet opțional (WEBVTT).
  • Metadate opționale (comentarii sau blocuri de stil/script).
  • Indicii (segmente de text cu sincronizare și conținut).

1. Formatul indicelui

Un indiciu are următoarea structură:

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

• Sincronizare: Timpul de început și sfârșit în formatul HH:MM:SS.mmm.
• Setări (opțional):
  • vertical (lr/rl pentru text vertical)
  • line (poziționare)
  • position (aliniere orizontală)
  • size (lățime/procentaj)
  • align (start/middle/end)

2. Conținutul indicelui

• Poate fi text simplu sau poate include markup:
  • Etichete: <b>, <i>, <u>, <ruby>, <lang>, etc.
  • Timpuri (<00:00:05.000>) pentru text în stil karaoke.

3. Stilizare și CSS

• Stilizarea poate fi aplicată prin:
  • Indicii în linie (folosind etichete).
  • Pseudo-elemente CSS (::cue, ::cue-region) în HTML.

4. Piste de metadate

• WebVTT poate transporta metadate (JSON etc.) pentru aplicații interactive.

5. Codificarea fișierului

• Trebuie să fie codificat în UTF-8.
• Liniile se termină cu \r\n, \n sau \r.

6. Reguli de procesare

• Parserele trebuie să gestioneze fișierele malformate în mod grațios.
• BOM (Byte Order Mark) este opțional.

7. Integrarea în HTML5

Folosit cu elementul <track>:

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

• kind poate fi subtitles, captions, descriptions, chapters sau metadata.

8. Suport în browsere

• Suport larg în browserele moderne (Chrome, Firefox, Safari, Edge).

9. Cazuri de utilizare

• Subtitrări/Legende pentru accesibilitate.
• Versuri karaoke cu text sincronizat.
• Navigare prin capitole în videoclipuri.
• Metadate pentru aplicații video interactive.

Exemplu de fișier WebVTT:

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.

Motorii de căutare nu pot „vedea” videoclipul tău — dar pot citi conținut bazat pe text. Folosind fișiere WebVTT, adaugi text indexabil care:

• Îmbunătățește descoperirea: Google poate indexa legendele și transcrierile, făcând ca videoclipurile tale să apară în mai multe rezultate de căutare.
• Crește implicarea: Videoclipurile subtitrate mențin utilizatorii implicați mai mult timp — crescând durata sesiunii și reducând rata de respingere.
• Îmbunătățește accesibilitatea: Legendarea este esențială pentru utilizatorii surzi sau cu deficiențe de auz și este favorizată în algoritmii de clasificare SEO.

Când un fișier WebVTT este asociat cu un videoclip pe o pagină web, Google poate analiza și înțelege acel text sincronizat, făcând conținutul mai relevant pentru anumite interogări.

Cum să adaugi WebVTT la un videoclip HTML5

Poți include un fișier WebVTT în videoclipul tău folosind elementul <track>:

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

• src: Calea către fișierul tău .vtt
• kind: Tipul pistei de text (subtitles, captions, chapters, etc.)
• srclang: Codul limbii (de ex., en, es)
• label: Eticheta pistei afișată în player

WebVTT vs SRT: Care este diferența?

Instrumente pentru crearea și editarea fișierelor WebVTT

Poți crea sau edita fișiere .vtt folosind:

• Editoare de text: VS Code, Sublime Text
• Editoare de subtitrări: Subtitle Edit, Amara, Aegisub
• Convertoare: Folosește instrumente pentru a converti SRT în VTT și invers

Cum să deschizi un fișier WebVTT?

Pentru a deschide un fișier WebVTT (.vtt), poți folosi orice editor de text sau editor de subtitrări.

Deschide într-un editor de text

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

Deoarece fișierele .vtt sunt text simplu, le poți vizualiza și edita ca pe orice fișier text obișnuit.

Deschide într-un editor de subtitrări

• Subtitle Edit (Windows)
• Aegisub (cross-platform)
• Amara (bazat pe web)

Deschide într-un browser

1. Creează un fișier HTML simplu cu un tag <video> și <track>.
2. Deschide fișierul HTML într-un browser pentru a vizualiza videoclipul cu subtitrări.

Caracteristici cheie ale fișierelor ASS

Întrebări frecvente

Întrebare 1: Care este diferența dintre WebVTT și SRT?
R: WebVTT se bazează pe SRT, dar adaugă funcționalități esențiale precum poziționarea textului, etichete de voce, stilizare CSS și suport pentru metadate, plus integrare nativă cu video HTML5.

Întrebare 2: Cum adaug subtitrări WebVTT pe YouTube?
R: Încarcă fișierul .vtt când adaugi subtitrări la videoclipul tău, sau folosește generarea automată de legende de la YouTube și descarcă fișierul WebVTT generat pentru editare.

Întrebare 3: Pot fi fișierele WebVTT să includă imagini?
R: Specificația WebVTT nu suportă direct imagini încorporate, dar poți folosi indicii de metadate cu URL-uri și să implementezi redarea personalizată a imaginilor prin JavaScript.

Întrebare 4: De ce stilurile mele WebVTT nu se aplică?
R: Verifică dacă blocurile STYLE apar înainte de primul indiciu, nu conțin linii goale și folosesc corect pseudo-elementul ::cue. De asemenea, verifică compatibilitatea cu browserul.

Întrebare 5: Funcționează fișierele WebVTT cu protocoale de streaming precum HLS?
R: Da, HLS (HTTP Live Streaming) suportă WebVTT segmentat pentru streaming eficient al legendelor împreună cu conținutul video.

Referințe

• WebVTT: Formatul Web Video Text Tracks