Что такое WebVTT?

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

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

Базовая структура WebVTT

• Файл WebVTT состоит из:
  • Необязательного заголовка (WEBVTT).
  • Необязательных метаданных (комментарии или блоки стилей/скриптов).
  • Ку (текстовые сегменты с таймингом и содержимым).

1. Формат cue

Cue имеет следующую структуру:

[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. Содержимое cue

• Может быть обычным текстом или включать разметку:
  • Теги: <b>, <i>, <u>, <ruby>, <lang> и т.д.
  • Таймкоды (<00:00:05.000>) для караоке‑стиля текста.

3. Стилизация и CSS

Стили можно применять через:

• Встроенные cue (с использованием тегов).
• CSS‑псевдоэлементы (::cue, ::cue-region) в HTML.

4. Дорожки метаданных

WebVTT может содержать метаданные (JSON и др.) для интерактивных приложений.

5. Кодировка файла

• Должен быть закодирован в UTF-8.
• Строки заканчиваются \r\n, \n или \r.

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

• Парсеры должны корректно обрабатывать повреждённые файлы.
• BOM (маркер порядка байтов) является необязательным.

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 vs 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?

WebVTT основан на SRT, но добавляет важные возможности, такие как позиционирование текста, голосовые теги, CSS‑стилизацию и поддержку метаданных, а также нативную интеграцию с видео HTML5.

Вопрос 2: Как добавить субтитры WebVTT на YouTube?

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

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

Спецификация WebVTT не поддерживает прямое встраивание изображений, однако можно использовать метаданные cue с URL‑адресами и реализовать пользовательское отображение изображений с помощью JavaScript.

Вопрос 4: Почему мои стили WebVTT не применяются?

Убедитесь, что блоки STYLE находятся перед первой cue, не содержат пустых строк и правильно используют псевдоэлемент ::cue. Также проверьте совместимость с браузером.

Вопрос 5: Работают ли файлы WebVTT с потоковыми протоколами, такими как HLS?

Да, HLS (HTTP Live Streaming) поддерживает сегментированные файлы WebVTT для эффективной передачи субтитров вместе с видеоконтентом.

Ссылки

• WebVTT: Формат текстовых дорожек веб‑видео