WebVTT

WebVTT (Web Video Text Tracks) — это формат файлов для хранения текстовых дорожек, синхронизированных с видео- или аудиоконтентом, предназначенный для использования в веб-браузерах. Он является открытым стандартом, разработанным Консорциумом Всемирной паутины (W3C), и служит для отображения субтитров, титров, описаний сцен, глав и метаданных. Формат основан на более раннем формате SRT (SubRip Text), но расширяет его возможности для веб-среды.

История

Предшественником WebVTT был формат SRT, который широко использовался для субтитров в медиаплеерах. Однако SRT не поддерживал встроенные стили, позиционирование, многоязычность и другие функции, необходимые для веб-стандартов. В 2010 году W3C начал работу над спецификацией WebVTT как частью стандарта HTML5, стремясь создать унифицированный способ добавления текстовых дорожек к видеоэлементам <video>.

Первая черновая версия спецификации была опубликована в 2011 году. В 2014 году WebVTT получил статус рабочего проекта (Working Draft). Окончательная версия стандарта была утверждена в 2019 году как рекомендация W3C (W3C Recommendation). С тех пор формат поддерживается всеми основными браузерами: Google Chrome, Mozilla Firefox, Apple Safari и Microsoft Edge.

Структура файла

Файл WebVTT имеет расширение .vtt и представляет собой текстовый файл в кодировке UTF-8. Структура строго регламентирована спецификацией.

Обязательные элементы

• Заголовок: Файл должен начинаться со строки WEBVTT (без кавычек, в верхнем регистре). Допускается наличие пробелов и необязательного заголовка после неё, например: WEBVTT - Мои субтитры.
• Пустая строка: После заголовка обязательно следует пустая строка.
• Блоки реплик: Каждый блок реплики (субтитра) состоит из:
• Идентификатор (необязательно): строка, которая может быть номером или меткой.
• Временная метка: диапазон времени в формате часы:минуты:секунды.миллисекунды --> часы:минуты:секунды.миллисекунды. Часы могут быть опущены, если длительность менее 1 часа (например, 00:00:01.000 --> 00:00:04.500).
• Пустая строка (необязательно, если нет стилей или комментариев).
• Текст субтитра: одна или несколько строк текста.

Пример простого файла

``` WEBVTT

00:00:01.000 --> 00:00:04.500 Это первый субтитр.

00:00:05.000 --> 00:00:09.000 А это второй.

00:00:10.000 --> 00:00:15.500 Третий субтитр с переносом строки. ```

Ключевые возможности

Стилизация и позиционирование

WebVTT поддерживает встроенные CSS-стили через теги <c>, <b>, <i>, <u>, <ruby>, а также атрибуты для позиционирования. Например, чтобы выделить текст жирным шрифтом:

`` 00:00:01.000 --> 00:00:04.500 <b>Важное сообщение</b> ``

Для позиционирования используется атрибут align (например, align:start, align:center, align:end) и указание координат в процентах. Например, субтитр в правом нижнем углу:

`` 00:00:01.000 --> 00:00:04.500 align:end position:90% Текст справа ``

Комментарии

Строки, начинающиеся с NOTE, игнорируются браузером. Они используются для заметок разработчика.

``` NOTE Этот файл создан 1 января 2023 года.

00:00:01.000 --> 00:00:04.500 Текст субтитра ```

Настройки (Settings)

В начале файла можно задать глобальные настройки с помощью блока STYLE. Например, определить стиль для всех субтитров:

``` WEBVTT

STYLE ::cue { color: yellow; background-color: black; font-size: 20px; } ```

Применение

Субтитры и титры

Основное применение — отображение субтитров для людей с нарушениями слуха или для перевода. В отличие от SRT, WebVTT позволяет задавать разные стили для разных говорящих, что улучшает читаемость.

Описания сцен (Audio Descriptions)

Для людей с нарушениями зрения WebVTT может содержать описания визуальных сцен, которые синтезируются голосом или отображаются в виде текста.

Главы

Файл может содержать временные метки для глав видео, что позволяет пользователю переходить к определённым разделам. Например:

``` WEBVTT

00:00:00.000 --> 00:00:10.000 Введение

00:00:10.000 --> 00:00:30.000 Основная часть ```

Метаданные

WebVTT может хранить произвольные метаданные, связанные с видео, например, ссылки, описания, данные для аналитики. Для этого используется специальный блок NOTE или идентификаторы.

Поддержка в браузерах

WebVTT поддерживается во всех современных браузерах. Для встраивания в HTML используется элемент <track>, который добавляется внутрь <video>.

``html <video controls> <source src="video.mp4" type="video/mp4"> <track src="subtitles.vtt" kind="subtitles" srclang="ru" label="Русский"> </video> ``

Атрибут kind определяет тип дорожки: subtitles (субтитры), captions (титры с описанием звуков), descriptions (описания сцен), chapters (главы) или metadata (метаданные).

Ограничения и критика

• Отсутствие поддержки многострочных стилей: Встроенные стили ограничены базовыми тегами. Для сложного форматирования требуется использование CSS через STYLE или внешние таблицы.
• Проблемы с кодировкой: Файл должен быть в UTF-8, иначе возможны ошибки отображения.
• Отсутствие встроенной поддержки шрифтов: Нельзя задать произвольный шрифт без CSS.
• Сложность с позиционированием: Точное позиционирование субтитров может быть затруднено из-за различий в реализации браузерами.
• Неполная поддержка в старых браузерах: Internet Explorer не поддерживает WebVTT.

Сравнение с другими форматами

WebVTT является компромиссом между простотой SRT и функциональностью TTML, что делает его стандартом для веб-видео.

Источники

• W3C Recommendation: WebVTT: The Web Video Text Tracks Format (2019)
• MDN Web Docs: WebVTT
• HTML Living Standard: The track element
• Спецификация HTML5: Text Track API