Субтитры

Доступность медиа через субтитры является важной частью видео HTML5. Разработчики могут добавлять субтитры в видео HTML5 указывая на заголовок файла, который содержит письменное представление, диалог или действия происходящее в видео.

Субтитры для видео HTML5
Субтитры для видео HTML5

Субтитры для видео HTML5 используют TTML-1.0 и WebVTT, как стандарт для полнофункционального отображения субтитров в видео HTML5.

Фрагмент кода HTML5 видео показывает, как работает элемент track для субтитров. Спецификации W3C для HTML5 видео позволяет подключить несколько форматов субтитров.

<video>
  <source type="video/mp4"src="video_file"></source>
  <track src="captions_file" label="Русские субтитры" kind="captions" srclang="ru" default></track>
  <track src="descriptions_file" label="Русское описание" kind="descriptions" srclang="ru"></track>
</video>

Текстовый файл

HTML5 track представляет собой текстовый файл, который может показывает пользователям субтитры или комментарий к видео. Они могут быть на нескольких языках. Можно использовать несколько элементов track и установить один по умолчанию, который будет использоваться сразу после воспроизведения видео.

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

Текст для трека использует упрощенную версию Web Video Track (WebVTT) или Timed Text Markup Language (TTML) своевременный текстовый файл formats.

Формат WEBVTT

Формат WebVTT — 8 битный формат файлов (UTF-8).

Текстовый файл WEBVTT выглядят следующим образом:

WEBVTT

00:00:01.878 --> 00:00:05.334
Добрый день всем, меня зовут Билл Гейтс

00:00:08.608 --> 00:00:15.296
Это видео научит вас, 
как правильно ковыряться в носу, 
чтобы не сломать палец.

Файл начинается с тега WEBVTT в качестве заголовка, а затем строки. Временная шкала в формате ЧЧ: ММ: СС.ссс. начало и окончания времени видео, разделенные пробелом, два дефиса и знак больше -->. Отрезки времени находятся в линию, сразу же после текста. Текст титров может быть в одну или несколько строк. Единственное требование не должно быть пустых строк между предложениями.

Формат TTML

Формат TTML поддерживает следующею структуру.

<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='ru' >
<body>

<div> 
<p begin="00:00:01.878" end="00:00:05.334" >Добрый день всем, меня зовут Билл Гейтс</p>
<p begin="00:00:08.608" end="00:00:15.296" >Это видео научит вас,<br /> 
как правильно ковыряться в носу,<br /> 
чтобы не сломать палец.</p>
</div>
 
</body>
</tt>

Файл TTML с разметкой XML, тип кодировки, объявление пространства имен и корневой элемент tt. Далее элементы body и div. В элементе div временная шкала. Фактическое время устанавливаются в качестве атрибутов (begin, end) в начальном теге p. Пустые строки и пробелы игнорируются. Если есть несколько строк, они переносятся тегом br.

Поддержка

Валидатор WEBVTT