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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

Заключение

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

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

Автор: Jeroen Wijering

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree