Создаем интерактивные HTML5 видео

Создаем интерактивные HTML5 видео

От автора: Элемент video в HTML5 позволяет вам вставлять видео на ваш сайт также легко, как и изображения. И поскольку все основные браузеры поддерживают тег video c 2011 года, он является наиболее надежным способом сделать так, чтобы люди увидели ваши видеоролики.

Одним из совсем недавних пополнений в семействе HTML5 стал элемент track. Он является дочерним по отношению к элементу video и направлен на то, чтобы сделать временную линейку более доступной для пользователей. Основная цель использования данного элемента – добавление скрытых титров. Эти титры загружаются из отдельного текстового файла (файл WebVTT) и выводятся в нижней части экрана. Ян Девлин (Ian Devlin) написал замечательную статью на данную тему.

Помимо титров, элемент track может быть использован для любого типа взаимодействий с временной линейкой. В данной статье рассматриваются 3 примера: указатели глав, предпросмотр миниатюр (кадров) и поиск по временной линейке. После прочтения этой статьи вы будете иметь достаточно полное представление об элементе track и его API сценарии для того чтобы создавать свои собственные видео-интерфейсы.

Указатели глав

Давайте начнем с примера, ставшего популярным благодаря DVD дискам: указатели глав. Они позволяют зрителям быстро переключиться на нужный раздел. А особенно это удобно при просмотре длинных фильмов, таких как «Синтел» (Sintel):

В данном примере указатели глав находятся во внешнем файле VTT и загружаются на страницу с помощью элемента track с указанием типа (kind=”chapters”). Элемент должен загружаться по умолчанию:

<video width="480" height="204" poster="assets/sintel.jpg" controls>
  <source src="assets/sintel.mp4" type="video/mp4">
  <track src="assets/chapters.vtt" kind="chapters" default>
</video>

Затем, мы используем JavaScript, чтобы загрузить ключевые метки текстовой дорожки, отформатировать их, а затем вывести на экран в панели управления под видео. Обратите внимание, что мы должны подождать, пока не загрузится внешний VTT файл:

track.addEventListener('load',function() {
    var c = video.textTracks[0].cues;
    for (var i=0; i<c.length; i++) {
      var s = document.createElement("span");
      s.innerHTML = c.text;
      s.setAttribute('data-start',c.startTime);
      s.addEventListener("click",seek);
      controlbar.appendChild(s);
    }
});

В приведенном выше коде мы добавляем 2 свойства к элементам списка, чтобы подключить интерактивность. Сначала мы устанавливаем атрибут data для хранения информации о стартовой позиции главы, а затем добавляем обработчик клика для использования внешней функции seek. Данная функция позволит переключить видео на стартовую позицию. Если видео (еще) не проигрывается, то включим данное действие:

function seek() {
  video.currentTime = this.getAttribute('data-start');
  if(video.paused){ video.play(); }
};

Вот и все! Теперь у вас есть визуальное оглавление, созданное с помощью VTT дорожки. Обратите внимание, что в демо-примере указателей глав логика скрипта немного расширена, чем это описано здесь, т.е. появилось управление воспроизведением видео при клике, обновление позиции видео в панели управления и CSS оформление.

Предпросмотр миниатюр (кадров)

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

Данный пример создавался также с использованием внешнего VTT файла, загруженного в дорожку с метаданными. Вместо текстовой информации, ключевые метки в данном VTT файле содержат ссылки на отдельные изображения в формате JPG. Каждый ключевой знак может ссылаться на отдельное изображение, но в данном случае мы предпочли использовать один спрайт в формате JPG для того чтобы уменьшить время ожидания и упростить управление. Ключевые метки ссылаются на корректную позицию спрайта благодаря использованию URI медиа фрагментов (Media Fragment URIs). Пример:


http://example.com/assets/thumbs.jpg?xywh=0,0,160,90

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

controlbar.addEventListener('mousemove',function(e) {
  // сначала преобразуем положение указателя мыши во временную позицию
  var p = (e.pageX - controlbar.offsetLeft) * video.duration / 480;
 
  // ..затем находим подходящую ключевую метку..
  var c = video.textTracks[0].cues;
  for (var i=0; i<c.length; i++) {
      if(c.startTime <= p && c.endTime > p) {
          break;
      };
  }
 
  // ..затем мы находим JPG url и запрос фрагмента..
  var url =c.text.split('#')[0];
  var xywh = c.text.substr(c.text.indexOf("=")+1).split(',');
 
  // ..и наконец, стилизуем наложение миниатюры
  thumbnail.style.backgroundImage = 'url('+c.text.split('#')[0]+')';
  thumbnail.style.backgroundPosition = '-'+xywh[0]+'px -'+xywh[1]+'px';
  thumbnail.style.left = e.pageX - xywh[2]/2+'px';
  thumbnail.style.top = controlbar.offsetTop - xywh[3]+8+'px';
  thumbnail.style.width = xywh[2]+'px';
  thumbnail.style.height = xywh[3]+'px';
});

Все готово! И снова в демо-примере предпросмотра миниатюр содержится дополнительный код. Он включает такую же логику управлению воспроизведением и поиском, а также логику, позволяющую показывать/скрывать миниатюру, когда указатель мыши наведен/не наведен на панель управления.

Поиск по временной линейке

В последнем примере рассматривается еще один способ предоставить доступ к вашему контенту, на этот раз с помощью организации внутреннего поиска по видео:

В данном примере повторно используется уже созданный VTT файл для титров, который загружен для дорожки с титрами. Под видео и панелью управления мы выводим стандартную форму поиска:

<form>
    <input type="search" />
    <button type="submit">Search</button>
</form>

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

form.addEventListener('submit',function(e) {
  // Сначала мы предотвращаем перезагрузку страницы и отбираем нужные ключевые метки/запрос..
  e.preventDefault();
  var c = video.textTracks[0].cues;
  var q = document.querySelector("input").value.toLowerCase();
 
  // ..затем находим все совпадения..
  var a = [];
  for(var j=0; j<c.length; j++) {
    if(c[j].text.toLowerCase().indexOf(q) > -1) {
      a.push(c[j]);
    }
  }
 
  // ..и наконец подсвечиваем совпадения на панели управления.
  for (var i=0; i<a.length; i++) {
    var s = document.createElement("span");
    s.style.left = (a.startTime/video.duration*480-2)+"px";
    bar.appendChild(s);
  }
});

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

Заключение

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

В общем, HTML5 элемент track – это простой в использовании, межплатформенный способ добавления интерактивности к вашим видео. И, несмотря на то, что действительно много времени уходит на написание VTT файла и создание простых примеров, вы заметите, что это повысит доступность ваших видео и улучшит взаимодействие с ними. Удачи!

Автор: Jeroen Wijering

Источник: https://hacks.mozilla.org/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Александр

    Хорошая статья!

  2. Татьяна

    Здравствуйте! Большое спасибо за статью. Скажите, пожалуйста, а сложно ли реализовать кликабельные субтитры? Например, при клике на слово в субтитрах в маленьком окошке или в другом месте на странице выскакивает какая-либо подсказка.

    Это делается с помощью JS или как-то редактируется файл vtt ? Или еще каким-то другим образом?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree