Какво е WebVTT?

WebVTT (Web Video Text Tracks Format) е текстов формат за субтитри, използван за добавяне на синхронизиран текст към видеа. Това е официалният формат, поддържан от HTML5 чрез елемента <track>, позволяващ ви да добавяте:

• Субтитри (преведен говор)
• Надписи (говор и звукови ефекти)
• Описания (визуална информация за екранни четци)
• Глави (навигационни точки във видеото)
• Метаданни

Основна структура на WebVTT

• Файлът WebVTT се състои от:
  • По избор заглавка (WEBVTT).
  • По избор метаданни (коментари или блокове за стил/скрипт).
  • Сигнали (текстови сегменти с тайминг и съдържание).

1. Формат на сигнал

Сигналът има следната структура:

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

• Тайминг: Начално и крайно време във формат HH:MM:SS.mmm.
• Настройки (по избор):
  • vertical (lr/rl за вертикален текст)
  • line (позициониране)
  • position (хоризонтално подравняване)
  • size (ширина/процент)
  • align (start/middle/end)

2. Съдържание на сигнала

• Може да бъде прост текст или да включва маркиране:
  • Тагове: <b>, <i>, <u>, <ruby>, <lang> и др.
  • Времеви маркери (<00:00:05.000>) за караоке-стил текст.

3. Стайлинг и CSS

• Стайлингът може да се приложи чрез:
  • Вградени сигнали (чрез тагове).
  • CSS псевдо-елементи (::cue, ::cue-region) в HTML.

4. Метаданни

• WebVTT може да съдържа метаданни (JSON и др.) за интерактивни приложения.

5. Кодиране на файла

• Трябва да е кодиран в UTF-8.
• Редовете завършват с \r\n, \n или \r.

6. Правила за обработка

• Парсерите трябва да обработват неправилно форматирани файлове без проблеми.
• BOM (Byte Order Mark) е по избор.

7. Интеграция с HTML5

• Използва се с елемент <track>:

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

• kind може да бъде subtitles, captions, descriptions, chapters или metadata.

8. Поддръжка от браузъри

• Широко поддържан в съвременните браузъри (Chrome, Firefox, Safari, Edge).

9. Приложения

• Субтитри/Надписи за достъпност.
• Караоке текстове със синхронизиран текст.
• Навигация по глави във видеа.
• Метаданни за интерактивни видео приложения.

Пример за 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.

Търсачките не могат да „гледат“ вашето видео — но могат да четат текстово съдържание. Чрез използване на WebVTT файлове, вие добавяте индексиран текст, който:

• Подобрява откриваемостта: Google може да индексира надписите и транскрипциите, като вашите видеа се появяват в повече резултати от търсене.
• Увеличава ангажираността: Видеа със субтитри задържат потребителите по-дълго — увеличавайки продължителността на сесията и намалявайки степента на отпадане.
• Подобрява достъпността: Надписите са от съществено значение за потребители, които са глухи или със затруднено слухово възприятие, и се предпочитат в SEO алгоритмите за класиране.

Когато WebVTT файл е свързан с видео на уеб страница, Google може да анализира и разбира този синхронизиран текст, правейки съдържанието по-релевантно за определени заявки.

Как да добавим WebVTT към HTML5 видео

Можете да включите WebVTT файл във вашето видео, като използвате елемента <track>:

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

• src: Път към вашия .vtt файл
• kind: Тип на текстовия запис (subtitles, captions, chapters и др.)
• srclang: Код на езика (например en, es)
• label: Етикет на записа, показван в плейъра

WebVTT срещу SRT: Каква е разликата?

Инструменти за създаване и редактиране на WebVTT файлове

Можете да създавате или редактирате .vtt файлове, като използвате:

• Текстови редактори: VS Code, Sublime Text
• Редактори за субтитри: Subtitle Edit, Amara, Aegisub
• Конвертори: Използвайте инструменти за конвертиране на SRT към VTT и обратно

Как да отворим WebVTT файл?

За да отворите WebVTT (.vtt) файл, можете да използвате всеки текстов редактор или редактор за субтитри.

Отваряне в текстов редактор

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

Тъй като .vtt файловете са обикновен текст, можете да ги преглеждате и редактирате като всеки друг текстов файл.

Отваряне в редактор за субтитри

За по-добро форматиране, преглед и синхронизация:

• Subtitle Edit (Windows)
• Aegisub (кросплатформен)
• Amara (уеб-базиран)

Отваряне в браузър

1. Създайте прост HTML файл с елементите <video> и <track>.
2. Отворете HTML файла в браузър, за да видите видеото със субтитри.

Ключови характеристики на ASS файлове

ЧЗВ

В1: Каква е разликата между WebVTT и SRT?

A: WebVTT е базиран на SRT, но добавя ключови функции като позициониране на текста, гласови тагове, CSS стилиране и поддръжка на метаданни, както и вродена интеграция с HTML5 видео.

В2: Как да добавя WebVTT субтитри в YouTube?

A: Качете вашия .vtt файл при добавяне на субтитри към видеото, или използвайте автоматичното генериране на надписи от YouTube и изтеглете създадения WebVTT файл за редактиране.

В3: Могат ли WebVTT файловете да включват изображения?

A: Спецификацията на WebVTT не поддържа директно вградени изображения, но можете да използвате метаданни сигнали с URL адреси и да реализирате персонализирано визуализиране на изображения чрез JavaScript.

В4: Защо стиловете ми в WebVTT не се прилагат?

A: Проверете дали STYLE блоковете се появяват преди първия сигнал, не съдържат празни редове и правилно използват псевдо-елемента ::cue. Също така проверете съвместимостта с браузъра.

В5: Работят ли WebVTT файловете с протоколи за стрийминг като HLS?

A: Да, HLS (HTTP Live Streaming) поддържа сегментирани WebVTT файлове за ефективно стрийминг на надписи заедно с видеото.

Препратки

• WebVTT: Форматът Web Video Text Tracks