Доступность СМИ

Дерек Херман
Derek Herman
Джо Медли
Joe Medley

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

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

Добавьте теги <track>

Чтобы добавить титры или описания программы чтения с экрана к веб-видео, добавьте тег <track> в тег <video> . Помимо подписей и описаний программы чтения с экрана, теги <track> также могут использоваться для субтитров и названий глав. Тег <track> также может помочь поисковым системам понять, что содержится в видео. Однако эти возможности выходят за рамки данной статьи.

Снимок экрана: титры, отображаемые с помощью элемента track в Chrome на Android
Снимок экрана: титры, отображаемые с помощью элемента track в Chrome на Android

Тег <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 : не видны и могут использоваться скриптами.

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