Всем привет! В данной небольшой статье мы с вами рассмотрим как создаются субтитры для видео с помощью видеоплеера html5. Поехали!

Для начала создадим сам видеоплеер. Делается это c помощью тега video.

<video  controls src="video.webm"></video>

В атрибуте src указывается путь до видео-файла который мы хотим проигрывать. controls - выводит панель контроллера для управления плеером.

Есть еще один вариант реализации.

<video  controls >
      <source src="video.webm" type="video/webm" >
  </video>

Более расширенную информацию по управлению плеером вы можете найти в данной статье media Javascript.

Для привязки субтитров к видео используется специальный тег track.

<video  controls >
      <source src="video.webm" type="video/webm">
      <track kind="subtitles" src="subtitles/ru.wtt" srclang="ru"  label="Русский">
</video>

Он имеет следующие атрибуты: kind - указывает тип титров в нашем случае это subtitles(субтитры), src - путь до WEBVTT файла(в котором указываются сами субтитры), srclang - язык субтитров, label - название поля выбора субтитров.

Теперь рассмотрим содержимое файла WEBVTT(ru.wtt) который находится по пути 'subtitles/ru.wtt'.

WEBVTT

00:00.000 --> 00:02.000
  Начало

00:06.000 --> 00:08.000
  Середина

00:10.000 --> 00:12.000
  Конец

Что мы здесь видим? В начале файла указывается тип файла 'WEBVTT' а затем идут субтитры. Обратите внимание что перед текстом каждого субтитра идет указание временного интервала в строгом формате XX:XX.XXX --> XX:XX.XXX(минуты:секунды.милисекунды) Как вы уже наверное догадались этот интервал указывает промежуток на котором будет отображаться текст субтитра.

В нашем случае первый субтитр с текстом 'Начало' будет отображаться с 0 по 2 секунду видео, второй 'Середина' с 6 по 8 сек., третий 'Конец' с 10 по 12 сек.

Рассмотрим активацию субтитров. Изначально субтитры у видео не будут отображаться, их необходимо включить через контроллер(панель управления) видео, выбрав в поле выбора субтитров название 'Русский'. Если мы хотим чтобы субтитры были активированы сразу при загрузке страницы, то необходимо в тег track добавить атрибут default.

<video  controls >
  <source src="video.webm" type="video/webm">
  <track kind="subtitles" src="subtitles/ru.wtt" srclang="ru" default  label="Русский">
</video>

В этом случае subtitles будут отображаться по умолчанию и при необходимости их можно будет просто отключить.

Вот в принципе и все что вы должны знать о создании субтитров в html5, отмечу что их вы можете создавать сколько угодно и на разные языки. Пример:

<video style="width:50%;" controls >
  <source src="video.webm" type="video/webm">
  <track kind="subtitles" src="subtitles/ru.wtt" srclang="ru" default  label="Русский">
  <track kind="subtitles" src="subtitles/en.wtt" srclang="en"  label="English">
</video>

Здесь мы создали субтитры на русском и английском языке. Переключать их можно в поле выбора титров. В таком случае теперь содержание нашего видео станет доступным для более широкой аудитории (для иностранцев, глухих и т п).

На этом данная статья подошла к концу. Не забывайте подписываться в группу Вконтакте и переходите на канал Youtube.

Всем спасибо за внимание! Пока.