В этой статье вы узнаете о формате WebVTT (текстовые дорожки веб-видео), который используется для описания синхронизированных текстовых данных, таких как субтитры или субтитры, чтобы сделать видео более доступными для вашей аудитории.
Доступность — это не вишенка на торте. Это никогда не что-то, что вы кладете в резерв в надежде представить это позже. Субтитры и описания программ чтения с экрана — единственный способ, с помощью которого многие пользователи могут просматривать ваши видео, а в некоторых юрисдикциях они даже требуются по закону или постановлению.
Добавьте теги <track>
Чтобы добавить титры или описания программы чтения с экрана к веб-видео, добавьте тег <track> в тег <video> . Помимо подписей и описаний программы чтения с экрана, теги <track> также могут использоваться для субтитров и названий глав. Тег <track> также может помочь поисковым системам понять, что содержится в видео. Однако эти возможности выходят за рамки данной статьи.
Тег <track> аналогичен элементу <source> тем, что оба имеют атрибут src , указывающий на ссылочный контент. Тег <track> указывает на файл WebVTT . Атрибут label указывает, как конкретный трек будет идентифицирован в интерфейсе.
Чтобы предоставить треки на нескольких языках, добавьте отдельный тег <track> для каждого предоставляемого вами файла WebVTT и укажите язык с помощью атрибута srclang .
Ниже показан пример тега <video> с двумя тегами <track> . Также есть образец, который вы можете просмотреть на Glitch (источник) .
Добавьте элемент <track> в качестве дочернего элемента <video> :
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
Файловая структура WebVTT
Ниже приведен гипотетический файл WebVTT для демонстрации, ссылка на которую приведена выше. Этот файл представляет собой текстовый файл, содержащий серию реплик . Каждый сигнал представляет собой блок текста, отображаемый на экране, и временной диапазон, в течение которого он будет отображаться.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Каждый элемент в файле трека называется сигналом . У каждого сигнала есть время начала и время окончания, разделенные стрелкой, а текст сигнала находится в строке ниже. Сигналы также могут иметь идентификаторы, такие как railroad и manuscript в примере ниже. Сигналы разделяются пустой строкой.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
Время сигнала указывается в формате hours:minutes:seconds.milliseconds . Разбор строгий. Это означает, что при необходимости числа должны быть дополнены нулями: часы, минуты и секунды должны состоять из двух цифр (00 для нулевого значения), а миллисекунды должны состоять из трех цифр (000 для нулевого значения). На Live WebVTT Validator есть отличный валидатор WebVTT, который проверяет наличие ошибок в форматировании времени и таких проблем, как непоследовательное время.
Вы можете создать файл VTT вручную, хотя существует множество сервисов , которые создадут их за вас.
Как вы можете видеть в наших предыдущих примерах, формат WebVTT довольно прост. Просто добавьте текстовые данные вместе с таймингами.
Однако что, если вы хотите, чтобы подписи отображались в другом положении с выравниванием по левому или правому краю? Возможно, чтобы совместить субтитры с текущим положением говорящего или не мешать тексту в камере. WebVTT определяет настройки для этого и многого другого непосредственно внутри файла .vtt . Обратите внимание на то, как определяется размещение подписей путем добавления настроек после определений временных интервалов.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Еще одна удобная функция — возможность стилизовать реплики с помощью CSS. Возможно, вы захотите использовать серый линейный градиент в качестве фона с цветом переднего плана papayawhip для всех подписей и всем жирным текстом цвета peachpuff .
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Если вы хотите узнать больше о стилизации и маркировке отдельных сигналов, спецификация WebVTT является хорошим источником расширенных примеров.
Виды текстовых дорожек
Вы заметили атрибут kind элемента <track> ? Он используется для указания того, какое отношение конкретная текстовая дорожка имеет к видео. Возможные значения атрибута kind :
-
captions: для субтитров из стенограмм и, возможно, переводов любого аудио. Подходит для людей с нарушениями слуха и в случаях, когда видео воспроизводится без звука. -
subtitles: для субтитров, то есть перевода речи и текста на язык, отличный от основного языка видео. -
descriptions: для описаний визуальных частей видеоконтента. Подходит для людей с ослабленным зрением. -
chapters: предназначены для отображения, когда пользователь перемещается по видео. -
metadata: не видны и могут использоваться скриптами.
Теперь, когда вы понимаете основы того, как сделать видео доступным на вашей веб-странице, вы можете задаться вопросом о более сложных случаях использования. Далее вы узнаете о медиа-фреймворках и о том, как они могут помочь вам добавлять видео на вашу веб-страницу, предоставляя при этом расширенные функции.