Kas yra WebVTT?

WebVTT (Web Video Text Tracks Format) yra tekstinis subtitrų formatas, naudojamas pridėti laiku sinchronizuotus tekstinius takelius prie vaizdo įrašų. Tai oficialus formatas, palaikomas HTML5 per <track> elementą, leidžiantis pridėti:

• Subtitrus (išverstas kalbėjimas)
• Antraštes (kalbėjimas ir garso efektai)
• Aprašymus (vaizdinė informacija ekrano skaitytuvams)
• Skyrius (naviguojami taškai vaizdo įraše)
• Metaduomenis

WebVTT pagrindinė struktūra

• WebVTT failas susideda iš:
  • Pasirinktinės antraštės (WEBVTT).
  • Pasirinktiniai metaduomenys (komentarai arba stiliaus/skritpų blokai).
  • Signalai (teksto segmentai su laiko žymomis ir turiniu).

1. Signalo formatas

Signalas turi šią struktūrą:

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

• Laikas: Pradžios ir pabaigos laikai HH:MM:SS.mmm formatu.
• Nustatymai (pasirinktinai):
  • vertical (lr/rl vertikaliam tekstui)
  • line (pozicionavimas)
  • position (horizontali lygiavimas)
  • size (plotis/procentai)
  • align (pradžia/vidurys/pabaiga)

2. Signalo turinys

• Gali būti paprastas tekstas arba su žymėjimu:
  • Žymės: <b>, <i>, <u>, <ruby>, <lang> ir kt.
  • Laiko žymės (<00:00:05.000>) karaoke stiliaus tekstui.

3. Stilius ir CSS

• Stilius gali būti taikomas per:
  • Įterptus signalus (naudojant žymes).
  • CSS pseudo-elementus (::cue, ::cue-region) HTML.

4. Metaduomenų takeliai

• WebVTT gali nešti metaduomenis (JSON ir kt.) interaktyvioms programoms.

5. Failo koduotė

• Turi būti UTF-8 koduotės.
• Eilutės baigiasi \r\n, \n arba \r.

6. Apdorojimo taisyklės

• Analizatoriai turi tvarkingai tvarkyti netinkamai suformuotus failus.
• BOM (Byte Order Mark) yra pasirenkamas.

7. HTML5 integracija

• Naudojamas su <track> elementu:

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

  • kind gali būti subtitles, captions, descriptions, chapters arba metadata.

8. Naršyklių palaikymas

• Plačiai palaikomas šiuolaikinėse naršyklėse (Chrome, Firefox, Safari, Edge).

9. Naudojimo atvejai

• Subtitrų/Antraščių prieinamumui.
• Karaokės dainų žodžiai su laiku sinchronizuotu tekstu.
• Skyrių navigacija vaizdo įrašuose.
• Metaduomenys interaktyvioms vaizdo programoms.

WebVTT failo pavyzdys:

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.

Paieškos varikliai negali „žiūrėti“ jūsų vaizdo įrašo – bet jie gali skaityti tekstinį turinį. Naudodami WebVTT failus, pridedate indeksuojamą tekstą, kuris:

• Pagerina randamumą: Google gali indeksuoti antraštes ir transkripcijas, todėl jūsų vaizdo įrašai atsiranda daugiau paieškos rezultatų.
• Padidina įsitraukimą: Subtitrų turintys vaizdo įrašai ilgiau įtraukia vartotojus – didina sesijos trukmę ir mažina atmetimo rodiklius.
• Pagerina prieinamumą: Antraštės būtinos vartotojams, kurie yra kurčiai arba turi klausos sutrikimų, ir jos teigiamai vertinamos SEO reitingų algoritmuose.

Priskiriant WebVTT failą vaizdo įrašui tinklalapyje, Google gali jį išanalizuoti ir suprasti laiku sinchronizuotą tekstą, todėl turinys tampa svarbesnis tam tikriems užklausoms.

Kaip pridėti WebVTT prie HTML5 vaizdo įrašo

Galite įtraukti WebVTT failą į savo vaizdo įrašą naudojant <track> elementą:

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

• src: Kelias į jūsų .vtt failą
• kind: Tekstinio takelio tipas (subtitles, captions, chapters ir kt.)
• srclang: Kalbos kodas (pvz., en, es)
• label: Takelio etiketė, rodoma grotuve

WebVTT vs SRT: Kuo skiriasi?

Įrankiai WebVTT failų kūrimui ir redagavimui

Galite kurti arba redaguoti .vtt failus naudojant:

• Tekstų redaktoriai: VS Code, Sublime Text
• Subtitrų redaktoriai: Subtitle Edit, Amara, Aegisub
• Konvertuotojai: Naudokite įrankius konvertuoti SRT į VTT ir atvirkščiai

Kaip atverti WebVTT failą?

Norėdami atverti WebVTT (.vtt) failą, galite naudoti bet kurį tekstų redaktorių arba subtitrų redaktorių.

Atverti tekstų redaktoriuje

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

Kadangi .vtt failai yra paprasti tekstai, galite juos peržiūrėti ir redaguoti kaip bet kurį įprastą tekstinį failą.

Atverti subtitrų redaktoriuje

Dėl geresnio formatavimo, peržiūros ir sinchronizavimo:

• Subtitle Edit (Windows)
• Aegisub (kelių platformų)
• Amara (interneto pagrindu)

Atverti naršyklėje

1. Sukurkite paprastą HTML failą su <video> ir <track> žymomis.
2. Atverkite HTML failą naršyklėje, kad pamatytumėte vaizdo įrašą su subtitrais.

Pagrindinės ASS failų savybės

Dažniausiai užduodami klausimai

K1: Kuo skiriasi WebVTT ir SRT?

A: WebVTT remiasi SRT, tačiau prideda svarbias funkcijas, tokias kaip teksto pozicionavimas, balso žymės, CSS stilius ir metaduomenų palaikymas, bei natūrali integracija su HTML5 vaizdo įrašu.

K2: Kaip pridėti WebVTT subtitrus į YouTube?

A: Įkelkite savo .vtt failą, kai pridedate subtitrus prie vaizdo įrašo, arba naudokite YouTube automatinį subtitrų generavimą ir atsisiųskite sugeneruotą WebVTT failą redagavimui.

K3: Ar WebVTT failai gali turėti paveikslėlius?

A: WebVTT specifikacija tiesiogiai nepalaiko įterptų paveikslėlių, tačiau galite naudoti metaduomenų signalus su URL ir įgyvendinti pasirinktą paveikslėlių atvaizdavimą per JavaScript.

K4: Kodėl mano WebVTT stiliai neveikia?

A: Patikrinkite, ar STYLE blokai yra prieš pirmą signalą, ar juose nėra tuščių eilučių ir ar teisingai naudojamas ::cue pseudo-elementas. Taip pat patikrinkite naršyklės suderinamumą.

K5: Ar WebVTT failai veikia su transliacijos protokolais, pvz., HLS?

A: Taip, HLS (HTTP Live Streaming) palaiko segmentuotus WebVTT, kad efektyviai transliuoti antraštes kartu su vaizdo turiniu.

Šaltiniai

• WebVTT: The Web Video Text Tracks Format