Доступное видео в HTML5 с субтитрами на JavaScript

Это замечательно, что HTML5 позволяет нам вставлять видео на веб-страницах таким образом, что оно может быть проиграно непосредственно браузерами, без необходимости установки плагинов. Эта функциональность добавлена в Opera 10.5 pre-alpha (на Windows и Linux; версия для Mac находится в разработке), а также в Firefox 3.6 и Google Chrome 3.

Проблема любого видео — используется ли оно в HTML5 или в другой версии HTML — это доступность. Что необходимо сделать сознательным разработчикам, чтобы обеспечить текстовую замену видео для тех, кто не может его просмотреть? В HTML5 не существует атрибута alt для элемента video в отличие от элемента img, однако вы можете заключить "дополнительное содержимое" внутри тегов, например:

<video>
Ваш браузер не поддерживает кодек Ogg Theora.
Вы можете <a href="video.ogg">загрузить видео</a> и просмотреть его в оффлайн.
</video>

Однако, в спецификации сказано:

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

В теории видео-файлы должны содержать свои собственные субтитры — не в виде изображения, а в отдельном текстовом файле, присоединенном к видео.

Однако, на практике, никто не знает, как это реализовать, и нет браузеров, способных обнаружить и обработать эти данные или передать их пользователю. Поэтому нам нужна какая-то "уловка", чтобы решить эту проблему. Идея, к которой я пришёл, заключается в том, что субтитры хранятся в виде простого текста на странице, обернутого в элемент <div id="transcript">. Если пользователь заходит на страницу с выключенным JavaScript, он просто видит видео и субтитры после него.

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

Вот простой пример видео, который демонстрирует эту технику: Пример видео с субтитрами — How to Leverage a Synergy [6]. (Для просмотра необходим браузер с поддержкой видео в формате Ogg.)

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

Для того чтобы скрипт знал, когда какую часть показывать, я пометил каждую часть временем появления на экране и временем исчезновения. Для этого я использую новые возможности HTML5, которые позволяют мне добавить мои собственные атрибуты данных к тегам и потом использовать их в скрипте. Их можно назвать как угодно, но они должны начинаться со строки "data-". Например, я назвал их data-begin и data-end, так как они совпадают с сответствующими названиями в спецификациях Timed Text (TT) Authoring Format 1.0 и SVG 1.1 (SVG/SMIL animation).

Я присваиваю атрибуту data-begin сдвиг по времени (от начала видео), через который текущий тег span появиться на экране. Атрибут data-end содержит время исчезновения тега с экрана:

<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein…</span>

В примере выше надпись появится через 1 секунду после начала видео и исчезнет через пять секунд (через 6 секунд после начала видео).

Теперь рассмотрим скрипт, который скрывает тег div, содержащий субтитры (Я использую JavaScript для написания правила CSS, чтобы назначить ему свойство display:none). Скрипт берет каждый тег span из скрытого блока div следующим образом:

var nodes = document.querySelectorAll('#transcript span');

Теперь нам необходимо расположить субтитры поверх видео в нужное время. Наложение текста выполняется легко; я просто абсолютно позиционирую другой тег div (с идентификатором captions) поверх видео. Для удобочитаемости белого текста поверх светлого фона, я добавляю тень к тексту, используя CSS:

text-shadow: black 1px 1px 3px;

Для определения времени появления каждого тега span, скрипт использует событие ontimeupdate (которое возникает каждые 250 миллисекунд проигрывания видео в Опере), чтобы сделать запрос к API видео и узнать как долго оно уже длится,

var v = document.querySelector('video');
var now = v.currentTime;

а затем обойти все элементы span субтитров и найти тот, атрибуты которого попадают в текущий промежуток времени.

В этом примере я использую генерируемое содержимое CSS, чтобы вставить отметку о времени в полную версию субтитров под видео, чтобы при отключенном JavaScript это время было доступно пользователю:

#transcript [data-begin]:before {
  content: " [" attr(data-begin) "s-" attr(data-end)"s] ";
  font-size:80%;
}

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

Также остаётся пара проблем со скриптом. Например, когда я заключаю аббревиатуры в субтитрах в тег abbr или иностранные слова в тег span с атрибутом lang, они не попадают в субтитры (хотя вряд ли это важно).

Кроме того, в конечном варианте пользователю должна быть предоставлена возможность увидеть субтитры полностью в виде текста, даже если у него включен JavaScript — возможно, он использует мобильный телефон и не хочет загружать всё видео, просмотрев лишь содержимое видео в виде обычного текста.