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

Derek Herman

Joe Medley

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

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

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

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

Снимок экрана: титры, отображаемые с помощью элемента 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>

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

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

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