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

Все основные браузеры, кроме Firefox, предоставляют меню, которое позволяет пользователю выбирать между несколькими текстовыми дорожками, если они доступны. Эти меню позволяют пользователю выбрать только одну дорожку или отключить их. Итак, чтобы включить несколько треков одновременно, нам нужно обратиться к JavaScript.

<video id=”video” controls preload=”metadata”>
   <source src=”video.mp4" type=”video/mp4">
   <track kind=”subtitles” srclang=”de” label=”Deutsch” src=”sintel-de.vtt” default>
   <track kind=”subtitles” srclang=”en” label=”English” src=”subtitles-en.vtt”>
   <track kind=”subtitles” srclang=”es” label=”Español” src=”sintel-es.vtt”>
</video>
<button id=”show-all”>Show all</button>

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

var video = document.getElementById(‘video’); document.getElementById(‘show-all’).addEventListener(‘click’, function() { 
   for (var i = 0; i < video.textTracks.length; i++) {  
      video.textTracks[i].mode = ‘showing’; 
   }
});

Этот JavaScript определяет прослушиватель событий, который реагирует на событие нажатия на кнопку «Показать все», который проходит через каждую из определенных текстовых дорожек видео и делает их видимыми, устанавливая для их свойства режима значение «показ».

И это все! Субтитры на всех трех языках теперь отображаются друг над другом в порядке, обратном их определению в HTML.

Позиционирование

Мы внесем некоторые изменения в реплики в каждом из файлов WebVTT, чтобы сделать их более разборчивыми. Прежде всего, мы будем располагать реплики по-разному, в зависимости от их языка, чтобы немецкие субтитры были слева, английские — посередине, а испанские — справа. Мы можем сделать это, установив значение параметра выравнивания cue textalignment. Немецким репликам будет присвоено значение start, а испанским репликам — значение end. Английские реплики будут использовать по умолчанию середину.

Далее мы установим размер метки для каждой из меток, присвоив каждой метке значение 32% (чтобы они не перекрывали друг друга) для всех меток, независимо от языка.

Наконец, используя выравнивание строки метки, мы установим значение строки каждой метки на 90, что должно выровнять каждую метку в нижней части видео и сохранить их выровненными.

Некоторые примеры готовых определений приведены ниже:

00:00:18.700 → 00:00:21.500 align:start size:32% line:90 <c.de>Diese Klinge birgt eine finstere Vergangenheit.</c> 
00:00:18.700 → 00:00:21.500 size:32% line:90
<c.en>This blade has a dark past.</c>
00:00:18.700 → 00:00:21.500 align:end size:32% line:90
<c.es>Esta hoja tiene un pasado oscuro.</c>

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

Но все субтитры одного цвета, поэтому отличить их друг от друга не так просто.

Стайлинг

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

Итак, я просмотрел каждый из файлов WebVTT, добавив диапазон классов сигналов к каждому сигналу, используя соответствующие языковые коды в качестве классов. Например:

<c.de>Diese Klinge birgt eine finstere Vergangenheit.</c> 
<c.en>This blade has a dark past.</c>
<c.es>Esta hoja tiene un pasado oscuro.</c>

Затем я определил стили окраски для каждого из субтитров, используя соответствующие цвета флажков для текста и фона.

::cue(.de) { 
   color: #000; background-color: #ffcc00;
}
::cue(.en) { 
   color: #fff; background-color: #00247d; 
}
::cue(.es) { 
   color: #f1bf00; background-color: #aa151b;
}

Теперь каждый набор субтитров будет отображаться в видео в своем собственном цвете!

Или будут?

Поддержка браузера

К сожалению, браузерная поддержка стилей подсказок не так хороша, как могла бы быть, со следующими результатами:

  • Chrome: отображается несколько субтитров, сохраняется цветовая палитра
  • Opera: отображается несколько субтитров, сохраняется цветовая палитра
  • Firefox: отображается несколько субтитров, без цветов
  • Храбрый: отображается несколько субтитров, без цветов
  • Vivaldi: отображается несколько субтитров, без цветов
  • Windows Edge: отображается несколько субтитров, без цветов
  • Internet Explorer 11: несколько субтитров, без цветов
  • Safari: вообще не работает, отображает только один набор субтитров

Так что в нынешнем виде только Chrome и Opera действительно будут соблюдать цветовые стили, но, по крайней мере, все остальные будут отображать несколько субтитров, за исключением Safari, который делает свое дело.

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

Первоначально опубликовано на www.iandevlin.com.