====== WebVTT (Формат текстовых дорожек веб-видео) ======
Формат текстовых дорожек веб-видео ( WebVTT ) — это формат для отображения синхронизированных текстовых дорожек (например, субтитров или заголовков) с использованием этого <track>элемента. Основная цель файлов WebVTT — добавление текстовых наложений в файл <video>. WebVTT — это текстовый формат, который должен быть закодирован с использованием UTF-8 . Там, где вы можете использовать пробелы, вы также можете использовать табуляции. Существует также небольшой API для представления и управления этими треками и данными, необходимыми для воспроизведения текста в нужное время.

Файлы WebVTT
MIME-тип WebVTT — text/vtt.

Файл WebVTT ( .vtt) содержит сигналы, которые могут состоять из одной или нескольких строк, как показано ниже:

WEBVTT

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

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.
Тело WebVTT
Структура WebVTT состоит из следующих компонентов (некоторые из них необязательные) в следующем порядке:

Дополнительный знак порядка байтов (BOM).
Строка " WEBVTT".
Необязательный текстовый заголовок справа от WEBVTT.
После . должен быть хотя бы один пробел WEBVTT.
Вы можете использовать это, чтобы добавить описание к файлу.
В текстовом заголовке вы можете использовать что угодно, кроме символов новой строки или строки " -->".
Пустая строка, эквивалентная двум последовательным символам новой строки.
Ноль или более реплик или комментариев.
Ноль или более пустых строк.
Примеры
Простейший файл WebVTT
WEBVTT
Очень простой файл WebVTT с текстовым заголовком.
WEBVTT - This file has no cues.
Общий пример WebVTT с заголовком и сигналами
WEBVTT - This file has cues.

14
00:01:14.815 --> 00:01:18.114
- What?
- Where are we now?

15
00:01:18.171 --> 00:01:20.991
- This is big bat country.

16
00:01:21.058 --> 00:01:23.868
- [ Bats Screeching ]
- They won't get in your hair. They're after the bugs.
Внутренняя структура файла WebVTT
Давайте еще раз рассмотрим один из наших предыдущих примеров и рассмотрим структуру сигнала более подробно.

WEBVTT

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

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.
В случае каждого сигнала:

Первая строка начинается со времени, которое является временем начала отображения текста, который появляется под ней.
В той же строке у нас есть строка " -->".
Мы заканчиваем первую строку вторым временем, которое является временем окончания отображения связанного текста.
Затем мы можем иметь одну или несколько строк, начинающихся с дефиса (-), каждая из которых будет содержать часть отображаемой текстовой дорожки.
Мы также можем размещать комментарии в нашем .vttфайле, чтобы помочь нам запомнить важную информацию о частях нашего файла. Они должны быть на отдельных строках, начиная со строки NOTE. Подробнее об этом вы найдете в разделе ниже.

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

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

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

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

Строка NOTE.
Пробел или новая строка.
Ноль или более символов, кроме указанных выше.
Примеры
Общий пример WebVTT
NOTE This is a 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.
Обычное использование комментариев
WEBVTT - Translation of that film I like

NOTE
This translation was done by Kyle so that
some friends can watch it with their parents.

1
00:02:15.000 --> 00:02:20.000
- Ta en kopp varmt te.
- Det är inte varmt.

2
00:02:20.000 --> 00:02:25.000
- Har en kopp te.
- Det smakar som te.

NOTE This last line may not translate well.

3
00:02:25.000 --> 00:02:30.000
- Ta en kopp
Стилизация сигналов WebVTT
Вы можете стилизовать сигналы WebVTT, ища элементы, соответствующие псевдоэлементу ::cue.

CSS сайта
CSS
Скопировать в буфер обмена

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}
Здесь все видеоэлементы оформлены с использованием серого линейного градиента в качестве фона с цветом переднего плана "papayawhip". Кроме того, текст, выделенный жирным шрифтом с использованием этого <b>элемента, окрашивается "peachpuff".

Приведенный ниже фрагмент HTML фактически управляет отображением самого мультимедиа.

HTML
Скопировать в буфер обмена

<video controls autoplay src="video.webm">
  <track default src="track.vtt" />
</video>
Внутри самого файла WebVTT
Вы также можете определить стиль непосредственно в файле WebVTT. В этом случае вы вставляете свои правила CSS в файл, причем каждому правилу предшествует строка "STYLE"в строке текста, как показано ниже:

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.
Мы также можем использовать идентификаторы внутри файла WebVTT, которые можно использовать для определения нового стиля для некоторых конкретных сигналов в файле. Пример, в котором мы хотели, чтобы текст транскрипции был выделен красным цветом, а другая часть оставалась нормальной, мы можем определить его следующим образом с помощью CSS. Следует отметить, что CSS использует escape-последовательности так же, как они используются на страницах HTML:

WEBVTT

1
00:00.000 --> 00:02.000
That's an, an, that's an L!

crédit de transcription
00:04.000 --> 00:05.000
Transcrit par Célestes™
CSS
Скопировать в буфер обмена

::cue(#\31) {
  color: lime;
}
::cue(#crédit\ de\ transcription) {
  color: red;
}
Также поддерживается позиционирование текстовых дорожек путем включения информации о позиционировании после тайминга в метку, как показано ниже ( дополнительную информацию см. в разделе Настройки метки ):

WEBVTT

00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
Where did he go?

00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
I think he went down this lane.

00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
What are you waiting for?
Сигналы WebVTT
Сигнал — это отдельный блок субтитров, который имеет одно время начала, время окончания и текстовую нагрузку. Кий состоит из пяти компонентов:

Необязательный идентификатор сигнала, за которым следует новая строка.
Тайминги реплик.
Дополнительные настройки метки, по крайней мере, с одним пробелом перед первой и между каждой настройкой.
Одна новая строка.
Текст полезной нагрузки сигнала.
Вот пример реплики:

1 - Title Crawl
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
Some time ago in a place rather distant....
Идентификатор сигнала
Идентификатор — это имя, которое идентифицирует сигнал. Его можно использовать для ссылки на реплику из сценария. Он не должен содержать новой строки и не может содержать строку " -->". Он должен заканчиваться одной новой строкой. Они не обязательно должны быть уникальными, хотя их принято нумеровать (например, 1, 2, 3).

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

Базовый идентификатор сигнала
1 - Title Crawl
Общее использование идентификаторов
WEBVTT

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

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

3
00:00:34.159 --> 00:00:35.743
Third
Тайминги меток
Время сигнала указывает, когда сигнал отображается. У него есть время начала и окончания, которые представлены метками времени. Время окончания должно быть больше времени начала, а время начала должно быть больше или равно всем предыдущим временам начала. Сигналы могут иметь перекрывающиеся тайминги.

Если файл WebVTT используется для глав ( is ), тогда в файле не может быть перекрывающихся таймингов.<track> kindchapters

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

Временная метка времени начала.
Хотя бы одно место.
Строка " -->".
Хотя бы одно место.
Временная метка времени окончания, которая должна быть больше времени начала.
Временные метки должны быть в одном из двух форматов:

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
Если параметр «вертикаль» не установлен, указывает, где текст будет располагаться вертикально. Если задано значение «Вертикально», линия указывает, где текст будет располагаться по горизонтали. Его значение может составлять:

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

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

Линия	verticalопущен	vertical:rl	vertical:lr
line:0	вершина	верно	левый
line:-1	нижний	левый	верно
line:0%	вершина	верно	левый
line:100%	нижний	левый	верно
position
Указывает, где текст будет отображаться по горизонтали. Если задано значение «вертикально», позиция определяет, где текст будет отображаться вертикально. Значение представляет собой процент, то есть целое число (без десятичных знаков) от 0 до 100 включительно, за которым следует знак процента (%).

Позиция	verticalопущен	vertical:rl	vertical:lr
position:0%	левый	вершина	вершина
position:100%	верно	нижний	нижний
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
Полезная нагрузка сигнала
Полезная нагрузка — это место, где находится основная информация или контент. При обычном использовании полезная нагрузка содержит отображаемые субтитры. Текст полезных данных может содержать символы новой строки, но не может содержать пустую строку, которая эквивалентна двум последовательным символам новой строки. Пустая строка означает конец реплики.

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

Помимо трех упомянутых выше escape-последовательностей, есть еще четыре. Они перечислены в таблице ниже.

Имя	Характер	Последовательность выхода
Амперсанд	&	&amp;
Меньше, чем	<	&lt;
Больше чем	>	&gt;
Отметка слева направо	никто	&lrm;
Метка справа налево	никто	&rlm;
Неразрывное пространство		&nbsp;
Текстовые теги полезной нагрузки
<b>Можно использовать ряд тегов, например . Однако если файл WebVTT используется в элементе, где указан <track>атрибут, вы не можете использовать теги.kindchapters

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

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>).

Тег класса ( <c></c>)
Оформите содержащийся текст с помощью класса CSS.

XML
Скопировать в буфер обмена

<c.classname>text</c>
Тег курсива ( <i></i>)
Выделите курсивом содержащийся текст.

XML
Скопировать в буфер обмена

<i>text</i>
Жирный тег ( <b></b>)
Выделите содержащийся текст жирным шрифтом.

XML
Скопировать в буфер обмена

<b>text</b>
Подчеркнуть тег ( <u></u>)
Подчеркните содержащийся текст.

XML
Скопировать в буфер обмена

<u>text</u>
Рубиновый тег ( <ruby></ruby>)
Используется с текстовыми тегами Ruby для отображения символов Ruby (т. е. небольших аннотативных символов над другими символами).

XML
Скопировать в буфер обмена

<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
Текстовый тег Ruby ( <rt></rt>)
Используется с тегами Ruby для отображения символов Ruby (т. е. небольших аннотативных символов над другими символами).

XML
Скопировать в буфер обмена

<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
Голосовая метка ( <v></v>)
Подобно тегу класса, также используется для стилизации содержащегося текста с помощью CSS.

XML
Скопировать в буфер обмена

<v Bob>text</v>
Методы и свойства экземпляра
В WebVTT используются методы, которые используются для изменения сигнала или региона, поскольку атрибуты для обоих интерфейсов различны. Мы можем классифицировать их для лучшего понимания каждого интерфейса в WebVTT:

ВТТКью
В интерфейсе доступны следующие методы VTTCue:

getCueAsHTML()чтобы получить HTML этого сигнала.
Конструктор VTTCue()для создания новых экземпляров этого интерфейса.
Также доступны различные свойства, позволяющие считывать и устанавливать характеристики сигнала, такие как его положение, выравнивание или размер. Проверьте VTTCueполный список.

ВТТРегион
Методы VTTRegionпредоставления, используемые для региона, перечислены ниже вместе с описанием их функциональности, особенно это позволяет настроить параметры прокрутки всех узлов, присутствующих в данном регионе.

Учебник о том, как написать файл WebVTT
Чтобы написать простой файл webVTT, нужно выполнить несколько шагов. Прежде чем начать, следует отметить, что вы можете использовать блокнот, а затем сохранить файл как файл «.vtt». Шаги приведены ниже:

Откройте блокнот.
Первая строка WebVTT стандартизирована аналогично тому, как некоторые другие языки требуют размещения заголовков в начале файла, указывающих тип файла. В самой первой строке нужно написать:
WEBVTT
Вторую строку оставьте пустой, а в третьей строке укажите время первой реплики. Например, для первой реплики, начинающейся через 1 секунду и заканчивающейся через 5 секунд, она записывается как:
00:01.000 --> 00:05.000
В следующей строке вы можете написать заголовок для этой реплики, который будет идти с первой секунды по пятую секунду включительно.
Следуя аналогичным шагам, можно создать полный файл WebVTT для конкретного видео или аудиофайла.
Псевдоклассы CSS
Псевдоклассы CSS позволяют нам классифицировать тип объекта, который мы хотим отличить от других типов объектов. В файлах WebVTT он работает так же, как и в файле HTML.

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

WEBVTT

04:02.500 --> 04:05.000
J'ai commencé le basket à l'âge de 13, 14 ans

04:05.001 --> 04:07.800
Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
В приведенном выше примере можно заметить, что мы можем использовать идентификатор и имя псевдокласса для определения языка подписи, где <i>тег предназначен для курсива.

Тип псевдокласса определяется используемым им селектором, и его работа по своей природе аналогична работе в HTML. Можно использовать следующие псевдоклассы CSS:

lang(Язык): например, p:lang(it).
link: например, a:link.
nth-last-child: например, p:nth-last-child(2).
nth-child(n): например, p:nth-child(2).
Где p и a — это теги, которые используются в HTML для абзаца и ссылки соответственно, и их можно заменить идентификаторами, которые используются для сигналов в файле WebVTT.