Формат текстовых дорожек веб-видео (WebVTT)

Формат текстовых дорожек веб-видео (WebVTT) — это формат текстовых файлов для отображения временных текстовых дорожек, синхронизированных с контентом в <video> и <audio> элементах. Например, их можно использовать для добавления субтитров и текстовых наложений к видео <video>.

Файлы WebVTT, связанные с медиа-элементом, добавляются с помощью элемента <track> — см. Отображение контента VTT, определённого в файле. Один медиа-элемент может быть связан с несколькими файлами, каждый из которых представляет различные типы временных данных, такие как субтитры, или заголовки глав, переведённые на разные языки.

Файлы WebVTT имеют MIME-тип text/vtt и расширение файла .vtt. Контент должен быть закодирован с помощью UTF-8.

Структура файла WebVTT состоит из следующих компонентов, некоторые из которых необязательны, в указанном порядке:

• Заголовок, состоящий из необязательной метки порядка байтов (BOM) — строки WEBVTT — за которой следует необязательный текстовый заголовок, разделённый одним или несколькими пробелами или табуляциями (в файлах WebVTT табуляция и пробелы взаимозаменяемы).
• Одна или несколько пустых строк, каждая из которых эквивалентна двум последовательным символам новой строки.
• Ноль или более STYLE, REGION, или NOTE блоков, разделённых одной или несколькими пустыми строками.
• Ноль или более блоков подписей или NOTE блоков, разделённых одной или несколькими пустыми строками.

Ниже приведён простой файл WebVTT, содержащий строку WEBVTT (но без текстового заголовка), блок NOTE и две подписи:

WEBVTT

NOTE This is a multi-line note block.
These are used for comments by the author
Two cue blocks are defined below.

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

00:05.000 --> 00:09.000
Because:
- It will perforate your stomach.
- You could die.

В следующих разделах описаны части файла, не используемые в примере выше.

Файлы WebVTT начинаются с блока заголовка, содержащего следующее:

• Необязательная метка порядка байтов (BOM), которая представляет собой символ Юникода U+FEFF.

• Строка WEBVTT.

• Необязательный текстовый заголовок справа от WEBVTT.

  • После WEBVTT должен быть хотя бы один пробел.
  • Вы можете использовать этот заголовок для добавления описания к файлу.
  • В текстовом заголовке можно использовать всё, кроме символов новой строки или строки -->.

Строка WEBVTT — единственная обязательная часть файла WebVTT, поэтому самый простой возможный файл WebVTT будет выглядеть так:

WEBVTT

Пример ниже демонстрирует заголовок с текстом. Обратите внимание, что этот текст должен быть отделён как минимум одним пробелом или табуляцией.

WEBVTT This file has no cues.

Подпись определяет отдельный блок субтитров, надписей или другого текста, который должен отображаться в определённом временном интервале. Подписи должны появляться после заголовка и любых блоков STYLE или REGION.

Каждая подпись состоит из трёх или более строк:

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

Вот пример простой подписи. Первая строка указывает начальное и конечное время отображения подписи, разделённые строкой -->. Вторая строка определяет отображаемый текст.

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

Следующая подпись немного сложнее. Она начинается с идентификатора подписи — 1 - Title Crawl — который может быть использован для ссылки на подпись в JavaScript и CSS. Она также имеет настройки подписи после временных меток для установки положения подписи.

1 - Title Crawl
00:05.000 --> 00:09.000 line:0 position:20% size:60% align:start
Because:
- It will perforate your stomach.
- You could die.

Обратите внимание, что вывод будет учитывать переводы строк в тексте содержимого, что позволяет создавать маркированные списки, используя символы дефиса (-) как показано. Как правило, вы должны вставлять эти переводы строк только по необходимости, так как браузер будет правильно обрезать текст.

Важно не использовать «лишние» пустые строки внутри подписи, например, между строкой временных меток и текстом содержимого, или внутри текста содержимого. Это потому, что пустая строка завершит текущую подпись.

Каждая часть подписи более подробно описана в следующих разделах.

Идентификатор — это имя, которое идентифицирует подпись. Он может использоваться для ссылки на подпись из JavaScript или CSS. Он не должен содержать символов новой строки и не может содержать строку -->. Он должен заканчиваться одной новой строкой. Идентификаторы не обязательно должны быть уникальными, хотя обычно их нумеруют (например, 1, 2, 3).

В примере ниже показан файл с несколькими подписями, включающими идентификаторы:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2 Some Text
00:00:30.739 --> 00:00:34.074
This is the second.

3
00:00:34.159 --> 00:00:35.743
This is the third

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

Подписи могут иметь перекрывающиеся временные метки, если файл WebVTT не используется для глав (<track> kind является chapters).

Каждая временная метка подписи содержит пять компонентов:

• Временная метка начального времени.
• Хотя бы один пробел.
• Строка -->.
• Хотя бы один пробел.
• Временная метка конечного времени, которая должна быть больше начального времени.

Временные метки могут быть заданы в одном из двух следующих форматов:

• mm:ss.ttt
• hh:mm:ss.ttt

Где компоненты определяются следующим образом:

hh

Представляет часы и должен содержать как минимум две цифры. Может содержать больше двух цифр (например, 9999:00:00.000).

mm

Представляет минуты и должен быть в диапазоне от 00 до 59 включительно.

ss

Представляет секунды и должен быть в диапазоне от 00 до 59 включительно.

ttt

Представляет миллисекунды и должен быть в диапазоне от 000 до 999 включительно.

Ниже приведены несколько примеров временных меток подписи:

• Примеры временных меток простых подписей

  00:00:22.230 --> 00:00:24.606
  00:00:30.739 --> 00:00:34.074
  00:00:34.159 --> 00:00:35.743
  00:00:35.827 --> 00:00:40.122
  

• Примеры временных меток перекрывающихся подписей

  00:00:00.000 --> 00:00:10.000
  00:00:05.000 --> 00:01:00.000
  00:00:30.000 --> 00:00:50.000
  

• Примеры временных меток неперекрывающихся подписей

  00:00:00.000 --> 00:00:10.000
  00:00:10.000 --> 00:01:00.581
  00:01:00.581 --> 00:02:00.100
  00:02:01.000 --> 00:02:01.000
  

Настройки подписей — это необязательные компоненты, которые позиционируют текст подписи над видео. Это включает горизонтальное и вертикальное позиционирование. Можно указать ноль или более настроек подписей в любом порядке, при условии, что каждая настройка используется не более одного раза.

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

vertical

Указывает, что текст будет отображаться вертикально, а не горизонтально, как в некоторых азиатских языках. Существует два возможных значения:

rl

Направление письма — справа налево.

lr

Направление письма — слева направо.

line

Если vertical не задано, line указывает, где текст появляется вертикально. Если vertical задано, line указывает, где текст появляется горизонтально. Его значение может быть:

Номер строки

Положение первой строки подписи, как она отображается на видео. Положительные числа отсчитываются сверху вниз, а отрицательные — снизу вверх.

Процентное значение

Целое число (без десятичных знаков) от 0 до 100 включительно, за которым должен следовать знак процента (%).

Строка	vertical опущено	vertical:rl	vertical:lr
line:0	верх	право	лево
line:-1	низ	лево	право
line:0%	верх	право	лево
line:100%	низ	лево	право

position

Если vertical не задано, position указывает, где текст будет появляться горизонтально. Если vertical задано, position указывает, где текст будет появляться вертикально. Значение представляет собой процентное значение от 0 до 100 включительно.

Положение	vertical опущено	vertical:rl	vertical:lr
position:0%	лево	верх	верх
position:100%	право	низ	низ

size

Если vertical не задано, size указывает ширину области текста. Если vertical задано, size указывает высоту области текста. Значение представляет собой процентное значение от 0 до 100 включительно.

Размер	vertical опущено	vertical:rl	vertical:lr
size:100%	полная ширина	полная высота	полная высота
size:50%	половина ширины	половина высоты	половина высоты

align

Указывает выравнивание текста. Текст выравнивается в области, заданной настройкой размера, если она задана.

Выравнивание	vertical опущено	vertical:rl	vertical:lr
align:start	лево	верх	верх
align:center	горизонтально по центру	вертикально по центру	вертикально по центру
align:end	право	низ	низ

Вот несколько примеров. Первая строка не содержит настроек. Вторая строка может использоваться для наложения текста на знак или метку. Третья строка может использоваться для заголовка. Последняя строка может использоваться для азиатского языка.

00:00:05.000 --> 00:00:10.000
00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
00:00:05.000 --> 00:00:10.000 position:10%,line-left align:left size:31%
00:00:05.000 --> 00:00:10.000 position:90% align:right size:35%
00:00:05.000 --> 00:00:10.000 position:45%,line-right align:center size:90%

В поле загрузки определяется содержимое подписи, например, текст субтитров или титров. Оно может содержать новые строки, но не может содержать две последовательные новые строки: это создаст пустую строку, которая указывает на конец блока.

Поле загрузки текста подписи не может содержать строку -->, символ амперсанда (& или символ &), или знак меньше (<). Вместо этого можно использовать ссылку на символ, такую как обозначение символа & для амперсанда и < для знака меньше. Также рекомендуется использовать escape-последовательность больше, чем > вместо знака больше (>), чтобы избежать путаницы с тегами. Если вы используете файл WebVTT для метаданных, эти ограничения не применяются.

Обратите внимание, что все основные браузеры допускают любые ссылки на символы в подписях, заметках или другом тексте.

Более старые версии браузеров могут поддерживать только следующий набор именованных ссылок на символы:

Можно использовать ряд тегов, таких как <b>, для разметки и стилизации текста в подписи. Однако, если файл WebVTT используется в элементе <track>, где атрибут kind имеет значение chapters, то использование тегов недоступно.

Тег временной метки

Теги временных меток используются для активации субтитров в стиле караоке. Временная метка должна быть больше начальной временной метки подписи, больше любой предыдущей временной метки в поле загрузки подписи и меньше конечной временной метки подписи. Активный текст — это текст между временной меткой и следующей временной меткой или до конца поля загрузки, если другой временной метки нет в поле загрузки. Любой текст перед активным текстом в поле загрузки является предыдущим текстом. Любой текст за пределами активного текста является будущим текстом.

1
00:16.500 --> 00:18.500
When the moon <00:17.500>hits your eye

1
00:00:18.500 --> 00:00:20.500
Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie

1
00:00:20.500 --> 00:00:21.500
That's <00:00:21.000>amore

Следующие теги — это разрешенные HTML-теги в подписи и требуют открывающего и закрывающего тегов (например, <b>text</b>). Текст, помеченный этими тегами, может быть отформатирован в STYLE блоках с помощью псевдоэлемента ::cue.

Тег курсива (<i></i>)

Выделяет содержащийся текст курсивом.

<i>text</i>

Тег полужирного шрифта (<b></b>)

Выделяет содержащийся текст полужирным шрифтом.

<b>text</b>

Тег подчеркивания (<u></u>)

Подчеркивает содержащийся текст.

<u>text</u>

Тег класса (<c></c>)

Добавляет класс к содержащемуся тексту для выбора с помощью CSS.

<c.classname>text</c>

Тег ruby (<ruby></ruby>)

Используется с тегами ruby-текста для отображения символов ruby (т.е. маленьких аннотационных символов над другими символами).

<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>

Тег ruby-текста (<rt></rt>)

Используется с тегами ruby для отображения символов ruby (т.е. маленьких аннотационных символов над другими символами).

<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>

Тег голоса (<v></v>)

Аналогично тегу класса, также используется для стилизации содержащегося текста с помощью CSS.

<v Bob>text</v>

Тег языка (<lang></lang>)

Используется для выделения текста, помеченного как принадлежащий конкретному языку или варианту языка, используя формат, определенный в RFC 5646: Теги для идентификации языков (также известный как BCP 47).

<lang en-GB>English text as spoken in Great Britain!</lang>

Блоки NOTE — это необязательные разделы, которые можно использовать для добавления комментариев к файлу WebVTT. Они предназначены для читателей файла и не отображаются пользователям. Например, вы можете использовать их для записи контактных данных автора, предоставления обзора вашей структуры или добавления заготовок для субтитров, которые ещё нужно написать.

Их можно использовать в любом месте файла WebVTT после заголовка.

Блоки NOTE могут содержать новые строки, но не могут содержать две последовательные новые строки: это создаст пустую строку, которая указывает на конец блока.

Комментарий не может содержать строку -->, символ амперсанда (&) или знак меньше (<). Если вы хотите использовать эти символы, вам следует использовать ссылку на символ, например, & для амперсанда и < для знака меньше. Также рекомендуется использовать последовательность для обозначения больше чем (>) вместо символа больше чем (>), чтобы избежать путаницы со знаками тегов.

Комментарий состоит из трёх частей:

• Строка NOTE.
• Пробел или новая строка.
• Ноль или более символов, отличных от указанных выше.

Вот несколько примеров:

NOTE This is a single line comment

NOTE
This is a simple multi line comment

NOTE
One comment that is spanning
more than one line.

NOTE You can also make a comment
across more than one line this way.

NOTE TODO I might add a line to indicate work that still has to be done.

Блоки STYLE — это необязательные разделы, которые можно использовать для встраивания стилей CSS для субтитров внутри файла WebVTT. Обратите внимание, что они используются для изменения внешнего вида и размера субтитров, но не их расположения и макета, которые контролируются настройками субтитров.

Блоки STYLE должны появляться перед любыми блоками субтитров в файле.

Каждый блок состоит из следующих строк:

• Строка STYLE, за которой следуют ноль или более пробелов или символов табуляции, а затем новая строка.
• Строка, определяющая CSS-стили для соответствия и применения, используя псевдоэлемент ::cue.

Блок не может содержать строку -->. Он может содержать новые строки, но не может содержать две последовательные новые строки: это создаст пустую строку, которая указывает на конец блока.

Пример простого файла WebVTT с двумя блоками STYLE показан ниже. Он использует ::cue для применения цвета текста ко всему тексту субтитров и другого цвета только к тексту, помеченному тегами <b></b>.

WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE comment blocks can be used between style blocks.

STYLE
::cue(b) {
  color: peachpuff;
}

00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.

NOTE style blocks cannot appear after the first cue.

Сопоставление всего текста содержимого субтитров с помощью ::cue.

Например, следующий блок STYLE будет сопоставлять весь текст субтитров и окрашивать его в жёлтый цвет.

STYLE
::cue {
  color: yellow;
}

Сопоставление текста содержимого субтитров, помеченного определёнными тегами содержимого субтитров, такими как c, i, b, u, ruby, rt, v, и lang, заданием тега в ::cue() в качестве селектора типа.

Например, следующий блок будет сопоставлять текст содержимого субтитров, помеченный тегом lang, в жёлтый цвет, а каждый из других тегов — в красный.

STYLE
::cue(c),
::cue(i),
::cue(b),
::cue(u),
::cue(ruby),
::cue(rt),
::cue(v) {
  color: red;
}
::cue(lang) {
  color: yellow;
}

Сопоставление всех тегов, помеченных с помощью селектора класса в ::cue().

Блок STYLE в следующем файле WebVTT будет соответствовать всему тексту после него, потому что у всех тегов есть класс myclass.

WEBVTT

STYLE
::cue(.myclass) {
  color: yellow;
}

00:00:00.000 --> 00:00:08.000
<c.myclass>Yellow!</c>
<i.myclass>Yellow!</i>
<u.myclass>Yellow!</u>
<b.myclass>Yellow!</b>
<u.myclass>Yellow!</u>
<ruby.myclass>Yellow! <rt.myclass>Yellow!</rt></ruby>
<v.myclass Kathryn>Yellow!</v>
<lang.myclass en>Yellow!</lang>

Чтобы выбрать определённый тег и класс, необходимо указать оба в ::cue():

STYLE ::cue(b.myclass) {
  color: yellow;
}

Текст содержимого субтитров, помеченный определённым тегом и атрибутом, может быть сопоставлен с помощью селектора атрибутов.

Например, рассмотрим следующий файл WebVTT, в котором используется текст, помеченный тегами v и lang теги текста содержимого субтитров, используя атрибуты для указания конкретного голоса («Salame») и языков.

WEBVTT

STYLE
::cue([lang="en-US"]) {
color: yellow;
}
::cue(lang[lang="en-GB"]) {
color: cyan;
}
::cue(v[voice="Salame"]) {
color: lime;
}

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
<lang en-GB>Cyan!</lang>

00:00:16.000 --> 00:00:24.000
I like <v Salame>lime.</v>

В предыдущем примере стиль текста для конкретного языка был задан с помощью сопоставления атрибутов. Вы также можете сопоставлять языки с помощью псевдокласса :lang(), как показано в блоке STYLE ниже.

STYLE
::cue(:lang(en)) {
  color: yellow;
}
::cue(:lang(en-GB)) {
  color: cyan;
}

Аналогичным образом вы можете сопоставлять с псевдоклассами :past и :future, чтобы обеспечить опыт, похожий на караоке.

video::cue(:past) {
  color: yellow;
}
video::cue(:future) {
  color: cyan;
}

Другие псевдоклассы, такие как link, nth-last-child, и nth-child, должны работать аналогично.

Сопоставление с конкретным субтитром id путём указания id внутри ::cue().

Например, в следующем файле WebVTT субтитры с идентификатором cue1 должны быть окрашены в зелёный цвет.

WEBVTT

STYLE ::cue(#cue1) {
  color: green;
}

cue1
00:00:00.000 --> 00:00:08.000
Green!

Обратите внимание, что в WebVTT CSS используются те же последовательности экранирования, что и в HTML-страницах. Ниже показано, как экранировать пробелы в идентификаторе субтитра:

WEBVTT

STYLE
::cue(#transcription\ credits) {
  color: red;
}

transcription credits
00:04.000 --> 00:05.000
Transcribed by Célestes™

• Псевдоэлементы CSS ::cue и ::cue()