Mi a WebVTT?

WebVTT (Web Video Text Tracks Formátum) egy szövegalapú feliratformátum, amelyet időzített szövegpályák videókhoz való hozzáadására használnak. Ez a HTML5 által a <track> elemmel támogatott hivatalos formátum, amely lehetővé teszi a következők hozzáadását:

• Feliratok (lefordított beszéd)
• Képaláírások (beszéd és hanghatások)
• Leírások (vizuális információk a képernyőolvasók számára)
• Fejezetek (navigálható pontok a videóban)
• Metaadatok

A WebVTT alapvető felépítése

• Egy WebVTT fájl a következőkből áll:
  • Egy opcionális fejléc (WEBVTT).
  • Opcionális metaadatok (kommentek vagy stílus/script blokkok).
  • Cue-k (szövegszegmensek időzítéssel és tartalommal).

1. Cue formátum

Egy cue a következő szerkezettel rendelkezik:

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

• Időzítés: Kezdő- és befejező időpontok HH:MM:SS.mmm formátumban.
• Beállítások (opcionális):
  • vertical (lr/rl a függőleges szöveghez)
  • line (pozicionálás)
  • position (vízszintes igazítás)
  • size (szélesség/százalék)
  • align (start/middle/end)

2. Cue tartalom

• Lehet egyszerű szöveg vagy tartalmazhat jelölőnyelvet:
  • Címkék: <b>, <i>, <u>, <ruby>, <lang>, stb.
  • Időbélyegek (<00:00:05.000>) karaoke stílusú szöveghez.

3. Stílus és CSS

• A stílus alkalmazható a következőkkel:
  • Beágyazott cue-k (címkék használatával).
  • CSS pszeudo-elemek (::cue, ::cue-region) HTML-ben.

4. Metaadat pályák

• A WebVTT képes metaadatokat (JSON stb.) hordozni interaktív alkalmazásokhoz.

5. Fájl kódolás

• UTF-8 kódolású kell legyen.
• A sorok befejezése \r\n, \n vagy \r.

6. Feldolgozási szabályok

• A parsernek hibás fájlokat is megfelelően kell kezelnie.
• A BOM (Byte Order Mark) opcionális.

7. HTML5 integráció

• A <track> elemmel használható:

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

• A kind lehet subtitles, captions, descriptions, chapters vagy metadata.

8. Böngésző támogatás

• Széles körben támogatott a modern böngészőkben (Chrome, Firefox, Safari, Edge).

9. Felhasználási esetek

• Feliratok/képaláírások a hozzáférhetőséghez.
• Karaoke dalszövegek időzített szöveggel.
• Fejezet navigáció videókban.
• Metaadatok interaktív videóalkalmazásokhoz.

WebVTT fájl példája:

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.

A keresőmotorok nem tudják “megtekinteni” a videódat – de olvashatják a szövegalapú tartalmat. A WebVTT fájlok használatával indexálható szöveget adsz hozzá, amely:

• Javítja a felfedezhetőséget: A Google indexelni tudja a képaláírásokat és átiratokat, így a videóid több keresési eredményben jelennek meg.
• Növeli az elköteleződést: A feliratos videók hosszabb ideig tartják a felhasználókat – növelve a munkamenet időtartamát és csökkentve a visszafordulási arányt.
• Fokozza a hozzáférhetőséget: A képaláírás elengedhetetlen a siket vagy halláskárosult felhasználók számára, és előnyben részesül a SEO rangsorolási algoritmusokban.

Amikor egy WebVTT fájl egy weboldalon lévő videóhoz van társítva, a Google képes feldolgozni és megérteni az időzített szöveget, így a tartalom relevánsabbá válik bizonyos keresések esetén.

Hogyan adjunk hozzá WebVTT-t egy HTML5 videóhoz

A <track> elem használatával beillesztheted a WebVTT fájlt a videódba:

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

• src: A .vtt fájl elérési útja
• kind: A szövegpálya típusa (subtitles, captions, chapters, stb.)
• srclang: Nyelvkód (pl. en, es)
• label: A lejátszóban megjelenő pálya címke

WebVTT vs SRT: Mi a különbség?

Eszközök WebVTT fájlok létrehozásához és szerkesztéséhez

A .vtt fájlok létrehozásához vagy szerkesztéséhez használhatod a következőket:

• Szövegszerkesztők: VS Code, Sublime Text
• Felirat szerkesztők: Subtitle Edit, Amara, Aegisub
• Átalakítók: Használj eszközöket a SRT VTT-re és vissza konvertálásához

Hogyan nyissuk meg a WebVTT fájlt?

A WebVTT (.vtt) fájl megnyitásához bármilyen szövegszerkesztőt vagy feliratszerkesztőt használhatsz.

Megnyitás szövegszerkesztőben

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

Mivel a .vtt fájlok egyszerű szöveg, úgy tekintheted és szerkesztheted őket, mint bármelyik normál szövegfájlt.

Megnyitás feliratszerkesztőben

A jobb formázás, előnézet és szinkronizálás érdekében:

• Subtitle Edit (Windows)
• Aegisub (platformfüggetlen)
• Amara (webalapú)

Megnyitás böngészőben

1. Hozz létre egy egyszerű HTML fájlt egy <video> és egy <track> taggal.
2. Nyisd meg a HTML fájlt egy böngészőben, hogy a felirattal ellátott videót lásd.

A ASS fájlok fő jellemzői

GyIK

Q1: Mi a különbség a WebVTT és az SRT között?
A: A WebVTT az SRT-n alapul, de fontos funkciókat ad hozzá, mint a szövegpozicionálás, hangcímkék, CSS stílus, és metaadat támogatás, valamint natív integráció a HTML5 videóval.

Q2: Hogyan adhatok hozzá WebVTT feliratot a YouTube-hoz?
A: Töltsd fel a .vtt fájlodat a feliratok hozzáadásakor a videóhoz, vagy használd a YouTube automatikus képaláírását, majd töltsd le a generált WebVTT fájlt szerkesztéshez.

Q3: Tartalmazhatnak képeket a WebVTT fájlok?
A: A WebVTT specifikáció nem támogat beágyazott képeket, de használhatsz metaadat cue-kat URL-ekkel, és egyedi képrenderelést valósíthatsz meg JavaScript segítségével.

Q4: Miért nem alkalmazódnak a WebVTT stílusaim?
A: Ellenőrizd, hogy a STYLE blokkok az első cue előtt jelennek meg, nincsenek üres sorok, és helyesen használod a ::cue pszeudo-elemet. Emellett ellenőrizd a böngésző kompatibilitást.

Q5: Működnek a WebVTT fájlok streaming protokollokkal, például HLS-sel?
A: Igen, a HLS (HTTP Live Streaming) támogatja a szegmentált WebVTT-t a feliratok hatékony streameléséhez a videótartalommal együtt.

Hivatkozások

• WebVTT: A Web Video Text Tracks Formátum