Czym jest WebVTT?

WebVTT (Web Video Text Tracks Format) jest formatem napisów opartym na tekście, używanym do dodawania synchronizowanych ścieżek tekstowych do filmów. Jest to oficjalny format obsługiwany przez HTML5 za pomocą elementu <track>, co pozwala dodać:

• Napisy (przetłumaczona mowa)
• Napisy opisowe (mowa i efekty dźwiękowe)
• Opisy (informacje wizualne dla czytników ekranu)
• Rozdziały (punkty nawigacyjne w wideo)
• Metadane

Podstawowa struktura WebVTT

• Plik WebVTT składa się z:
  • Opcjonalnego nagłówka (WEBVTT).
  • Opcjonalnych metadanych (komentarze lub bloki stylów/skryptów).
  • Cue’ów (segmentów tekstowych z czasem i zawartością).

1. Format cue

Cue ma następującą strukturę:

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

• Czas: Czas rozpoczęcia i zakończenia w formacie HH:MM:SS.mmm.
• Ustawienia (opcjonalne):
  • vertical (lr/rl dla tekstu pionowego)
  • line (pozycjonowanie)
  • position (wyrównanie poziome)
  • size (szerokość/procent)
  • align (start/middle/end)

2. Zawartość cue

• Może być zwykłym tekstem lub zawierać znaczniki:
  • Tagi: <b>, <i>, <u>, <ruby>, <lang> itd.
  • Znaczniki czasu (<00:00:05.000>) dla tekstu w stylu karaoke.

3. Stylowanie i CSS

• Stylowanie może być zastosowane poprzez:
  • Cue’ów inline (używając tagów).
  • Pseudo-elementy CSS (::cue, ::cue-region) w HTML.

4. Ścieżki metadanych

• WebVTT może zawierać metadane (JSON itp.) dla aplikacji interaktywnych.

5. Kodowanie pliku

• Musi być zakodowany w UTF-8.
• Linie kończą się \r\n, \n lub \r.

6. Zasady przetwarzania

• Parsery muszą radzić sobie z niepoprawnymi plikami w sposób łagodny.
• BOM (Byte Order Mark) jest opcjonalny.

7. Integracja z HTML5

Używany z elementem <track>:

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

• kind może być subtitles, captions, descriptions, chapters lub metadata.

8. Obsługa w przeglądarkach

• Szeroko wspierane w nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge).

9. Przypadki użycia

• Napisy/Napisy opisowe dla dostępności.
• Teksty karaoke z tekstem synchronizowanym.
• Nawigacja po rozdziałach w wideo.
• Metadane dla interaktywnych aplikacji wideo.

Przykład pliku 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.

Wyszukiwarki nie mogą „oglądać” Twojego wideo — ale mogą czytać treść tekstową. Korzystając z plików WebVTT, dodajesz tekst możliwy do indeksacji, który:

• Poprawia wykrywalność: Google może indeksować napisy i transkrypcje, dzięki czemu Twoje wideo pojawia się w większej liczbie wyników wyszukiwania.
• Zwiększa zaangażowanie: Wideo z napisami utrzymuje użytkowników dłużej — zwiększając czas sesji i zmniejszając współczynnik odrzuceń.
• Poprawia dostępność: Napisy są niezbędne dla osób niesłyszących lub niedosłyszących i są doceniane w algorytmach rankingowych SEO.

Gdy plik WebVTT jest powiązany z wideo na stronie internetowej, Google może analizować i rozumieć ten tekst synchronizowany, co sprawia, że treść jest bardziej istotna dla niektórych zapytań.

Jak dodać WebVTT do wideo HTML5

Możesz dołączyć plik WebVTT do swojego wideo za pomocą elementu <track>:

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

• src: Ścieżka do Twojego pliku .vtt
• kind: Typ ścieżki tekstowej (subtitles, captions, chapters itp.)
• srclang: Kod języka (np. en, es)
• label: Etykieta ścieżki wyświetlana w odtwarzaczu

WebVTT vs SRT: jaka jest różnica?

Narzędzia do tworzenia i edycji plików WebVTT

• Edytory tekstu: VS Code, Sublime Text
• Edytory napisów: Subtitle Edit, Amara, Aegisub
• Konwertery: Użyj narzędzi do konwersji SRT na VTT i odwrotnie

Jak otworzyć plik WebVTT?

Aby otworzyć plik WebVTT (.vtt), możesz użyć dowolnego edytora tekstu lub edytora napisów.

Otwórz w edytorze tekstu

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

Ponieważ pliki .vtt są zwykłym tekstem, możesz je przeglądać i edytować jak każdy zwykły plik tekstowy.

Otwórz w edytorze napisów

• Subtitle Edit (Windows)
• Aegisub (wieloplatformowy)
• Amara (oparty na sieci)

Otwórz w przeglądarce

1. Utwórz prosty plik HTML z tagami <video> i <track>.
2. Otwórz plik HTML w przeglądarce, aby zobaczyć wideo z napisami.

Kluczowe cechy plików ASS

FAQ

P1: Jaka jest różnica między WebVTT a SRT?

WebVTT opiera się na SRT, ale dodaje kluczowe funkcje takie jak pozycjonowanie tekstu, tagi głosowe, stylowanie CSS i obsługę metadanych, a także natywną integrację z wideo HTML5.

P2: Jak dodać napisy WebVTT do YouTube?

Prześlij swój plik .vtt podczas dodawania napisów do wideo, lub użyj automatycznego generowania napisów przez YouTube i pobierz wygenerowany plik WebVTT do edycji.

P3: Czy pliki WebVTT mogą zawierać obrazy?

Specyfikacja WebVTT nie obsługuje bezpośrednio osadzonych obrazów, ale możesz używać cue’ów metadanych z adresami URL i implementować własne renderowanie obrazów przy pomocy JavaScript.

P4: Dlaczego moje style WebVTT nie działają?

Sprawdź, czy bloki STYLE znajdują się przed pierwszym cue, nie zawierają pustych linii i używają pseudo-elementu ::cue poprawnie. Również zweryfikuj kompatybilność przeglądarki.

P5: Czy pliki WebVTT działają z protokołami strumieniowania takimi jak HLS?

Tak, HLS (HTTP Live Streaming) obsługuje segmentowane WebVTT do efektywnego strumieniowania napisów wraz z treścią wideo.

Odniesienia

• WebVTT: Format Web Video Text Tracks