От автора: Элемент video в HTML5 позволяет вам вставлять видео на ваш сайт также легко, как и изображения. И поскольку все основные браузеры поддерживают тег video c 2011 года, он является наиболее надежным способом сделать так, чтобы люди увидели ваши видеоролики.
Одним из совсем недавних пополнений в семействе HTML5 стал элемент track. Он является дочерним по отношению к элементу video и направлен на то, чтобы сделать временную линейку более доступной для пользователей. Основная цель использования данного элемента – добавление скрытых титров. Эти титры загружаются из отдельного текстового файла (файл WebVTT) и выводятся в нижней части экрана. Ян Девлин (Ian Devlin) написал замечательную статью на данную тему.
Помимо титров, элемент track может быть использован для любого типа взаимодействий с временной линейкой. В данной статье рассматриваются 3 примера: указатели глав, предпросмотр миниатюр (кадров) и поиск по временной линейке. После прочтения этой статьи вы будете иметь достаточно полное представление об элементе track и его API сценарии для того чтобы создавать свои собственные видео-интерфейсы.
Указатели глав
Давайте начнем с примера, ставшего популярным благодаря DVD дискам: указатели глав. Они позволяют зрителям быстро переключиться на нужный раздел. А особенно это удобно при просмотре длинных фильмов, таких как «Синтел» (Sintel):
В данном примере указатели глав находятся во внешнем файле VTT и загружаются на страницу с помощью элемента track с указанием типа (kind=”chapters”). Элемент должен загружаться по умолчанию:
|
1 2 3 4 |
<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 файл:
|
1 2 3 4 5 6 7 8 9 10 |
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[i].text; s.setAttribute('data-start',c[i].startTime); s.addEventListener("click",seek); controlbar.appendChild(s); } }); |
В приведенном выше коде мы добавляем 2 свойства к элементам списка, чтобы подключить интерактивность. Сначала мы устанавливаем атрибут data для хранения информации о стартовой позиции главы, а затем добавляем обработчик клика для использования внешней функции seek. Данная функция позволит переключить видео на стартовую позицию. Если видео (еще) не проигрывается, то включим данное действие:
|
1 2 3 4 |
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). Пример:
|
1 |
//example.com/assets/thumbs.jpg?xywh=0,0,160,90 |
Далее, вся важная логика скрипта, выбирающая и отображающая нужную миниатюру, возложена на слушателя событий mousemove для панели управления:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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[i].startTime <= p && c[i].endTime > p) { break; }; } // ..затем мы находим JPG url и запрос фрагмента.. var url =c[i].text.split('#')[0]; var xywh = c[i].text.substr(c[i].text.indexOf("=")+1).split(','); // ..и наконец, стилизуем наложение миниатюры thumbnail.style.backgroundImage = 'url('+c[i].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 файл для титров, который загружен для дорожки с титрами. Под видео и панелью управления мы выводим стандартную форму поиска:
|
1 2 3 4 |
<form> <input type="search" /> <button type="submit">Search</button> </form> |
Как и в случае с миниатюрами, вся ключевая логика скрипта содержится в единственной функции. На этот раз это обработчик события для отправки формы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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[i].startTime/video.duration*480-2)+"px"; bar.appendChild(s); } }); |
И снова нам все удалось! Как и в предыдущих примерах в демо-примере поиска по временной линейке содержится дополнительный код, содержащий логику по управлению воспроизведением и поиском, а также сниппет для обновления текстовых подсказок в панели управления.
Заключение
Вышеприведенные примеры должны были дать вам достаточно информации для создания собственных интерактивных видео. В качестве дополнительного источника вдохновения мы можете посмотреть наши эксперименты над активными кликабельными областями, интерактивными транскриптами (текстовыми записями) или взаимодействием временной линейки с другими элементами.
В общем, HTML5 элемент track – это простой в использовании, межплатформенный способ добавления интерактивности к вашим видео. И, несмотря на то, что действительно много времени уходит на написание VTT файла и создание простых примеров, вы заметите, что это повысит доступность ваших видео и улучшит взаимодействие с ними. Удачи!
Автор: Jeroen Wijering
Источник: //hacks.mozilla.org/
Редакция: Команда webformyself.
Комментарии (2)