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

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

Опубликовано: 20 августа 2020 г.

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

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

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

Тег <track> аналогичен элементу <source> тем, что оба имеют атрибут src , указывающий на ссылочный контент. Тег <track> указывает на файл WebVTT . Атрибут label указывает, как конкретный трек может быть идентифицирован в интерфейсе.

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

Взгляните на этот пример тега <video> с двумя тегами <track> . Добавьте элемент <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>

Также есть образец, который вы можете просмотреть на Glitch .

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

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