Co je WebVTT?

WebVTT (Web Video Text Tracks Format) je formát titulků založený na textu, který se používá k přidání časovaných textových stop do videí. Je to oficiální formát podporovaný HTML5 prostřednictvím elementu <track>, který umožňuje přidat:

• Titulky (přeložená řeč)
• Popisky (řeč a zvukové efekty)
• Popisy (vizuální informace pro čtečky obrazovky)
• Kapitoly (navigovatelné body ve videu)
• Metadata

Základní struktura WebVTT

• Soubor WebVTT se skládá z:
  • Volitelné hlavičky (WEBVTT).
  • Volitelných metadata (komentáře nebo bloky stylu/skriptu).
  • Cue (textové segmenty s časováním a obsahem).

1. Formát cue

Cue má následující strukturu:

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

• Časování: Časy začátku a konce ve formátu HH:MM:SS.mmm.
• Nastavení (volitelné):
  • vertical (lr/rl pro vertikální text)
  • line (umístění)
  • position (horizontální zarovnání)
  • size (šířka/procenta)
  • align (start/middle/end)

2. Obsah cue

• Může být prostý text nebo obsahovat značky:
  • Tagy: <b>, <i>, <u>, <ruby>, <lang> atd.
  • Časové značky (<00:00:05.000>) pro karaoke styl.

3. Stylování a CSS

• Stylování lze aplikovat pomocí:
  • Inline cue (použitím tagů).
  • CSS pseudo-elementů (::cue, ::cue-region) v HTML.

4. Stopy metadat

• WebVTT může nést metadata (JSON atd.) pro interaktivní aplikace.

5. Kódování souboru

• Musí být kódován jako UTF-8.
• Řádky končí \r\n, \n nebo \r.

6. Pravidla zpracování

• Parsery musí zvládnout poškozené soubory elegantně.
• BOM (Byte Order Mark) je volitelný.

7. Integrace s HTML5

Používá se s elementem <track>:

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

• kind může být subtitles, captions, descriptions, chapters nebo metadata.

8. Podpora v prohlížečích

• Široce podporováno v moderních prohlížečích (Chrome, Firefox, Safari, Edge).

9. Případy použití

• Titulky/Popisky pro přístupnost.
• Karaoke texty s časovaným textem.
• Navigace kapitol ve videích.
• Metadata pro interaktivní video aplikace.

Příklad souboru 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.

Vyhledávače nemohou “sledovat” vaše video – ale mohou číst textový obsah. Používáním souborů WebVTT přidáte indexovatelný text, který:

• Zlepšuje objevitelnost: Google může indexovat popisky a přepisy, což způsobí, že se vaše videa objeví ve více výsledcích vyhledávání.
• Zvyšuje zapojení: Videa s titulky udržují uživatele déle, což zvyšuje dobu trvání relace a snižuje míru okamžitého opuštění.
• Zlepšuje přístupnost: Titulky jsou nezbytné pro uživatele, kteří jsou neslyšící nebo mají potíže se sluchem, a jsou upřednostňovány v SEO algoritmech.

Když je soubor WebVTT spojen s videem na webové stránce, Google může analyzovat a pochopit tento časovaný text, což činí obsah relevantnějším pro určité dotazy.

Jak přidat WebVTT do HTML5 videa

Můžete zahrnout soubor WebVTT do videa pomocí elementu <track>:

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

• src: Cesta k vašemu souboru .vtt
• kind: Typ textové stopy (subtitles, captions, chapters atd.)
• srclang: Kód jazyka (např. en, es)
• label: Název stopy zobrazený v přehrávači

WebVTT vs SRT: Jaký je rozdíl?

Nástroje pro vytváření a úpravu souborů WebVTT

• Textové editory: VS Code, Sublime Text
• Editory titulků: Subtitle Edit, Amara, Aegisub
• Konvertory: Použijte nástroje k převodu SRT na VTT a naopak

Jak otevřít soubor WebVTT?

Pro otevření souboru WebVTT (.vtt) můžete použít libovolný textový editor nebo editor titulků.

Otevření v textovém editoru

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

Protože soubory .vtt jsou prostý text, můžete je zobrazovat a upravovat jako jakýkoli běžný textový soubor.

Otevření v editoru titulků

• Subtitle Edit (Windows)
• Aegisub (víceplatforemní)
• Amara (webová aplikace)

Otevření v prohlížeči

1. Vytvořte jednoduchý HTML soubor s tagy <video> a <track>.
2. Otevřete HTML soubor v prohlížeči a zobrazte video s titulky.

Klíčové charakteristiky souborů ASS

Často kladené otázky

Q1: Jaký je rozdíl mezi WebVTT a SRT?

A: WebVTT je založen na SRT, ale přidává klíčové funkce jako umístění textu, hlasové tagy, CSS stylování a podporu metadat, plus nativní integraci s HTML5 videem.

Q2: Jak přidat titulky WebVTT na YouTube?

A: Nahrajte svůj soubor .vtt při přidávání titulků k vašemu videu, nebo použijte automatické generování titulků na YouTube a stáhněte vygenerovaný soubor WebVTT pro úpravy.

Q3: Mohou soubory WebVTT obsahovat obrázky?

A: Specifikace WebVTT nepodporuje přímo vložené obrázky, ale můžete použít metadata cue s URL a implementovat vlastní vykreslování obrázků pomocí JavaScriptu.

Q4: Proč se mé styly WebVTT neaplikují?

A: Zkontrolujte, že bloky STYLE se nacházejí před první cue, neobsahují prázdné řádky a správně používají pseudo-element ::cue. Také ověřte kompatibilitu prohlížeče.

Q5: Fungují soubory WebVTT s streamingovými protokoly jako HLS?

A: Ano, HLS (HTTP Live Streaming) podporuje segmentované WebVTT pro efektivní streamování titulků spolu s video obsahem.

Odkazy

• WebVTT: Formát Web Video Text Tracks