Створюємо інтерактивні HTML5 відео

17

Від автора: Елемент в HTML5 video дозволяє вам вставляти відео на ваш сайт також легко, як і зображення. І оскільки всі основні браузери підтримують тег video з 2011 року, він є найбільш надійним способом зробити так, щоб люди побачили ваші відеоролики.

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

Крім титрів, елемент track може бути використаний для будь-якого типу взаємодій з тимчасової лінійкою. У даній статті розглядаються 3 приклад: покажчики глав, попередній перегляд мініатюр (кадрів) і пошук по тимчасовій лінійці. Після прочитання цієї статті ви будете мати достатньо повне уявлення про елементі track і його API сценарії для того, щоб створювати свої власні відео-інтерфейси.

Покажчики голів

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

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

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

track.addEventListener. (‘load’,function() {
var c = video.textTracks[0].cues;
for (var i=0; iУ наведеному вище коді ми додаємо 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 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 файл для титрів, який завантажений для доріжки з титрами. Під відео і панеллю управління ми виводимо стандартну форму пошуку:

Search

Як і у випадку з мініатюрами, вся ключова логіка скрипта міститься в єдиній функції. На цей раз це обробник події для відправки форми:

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 -1) {
a.push(c[j]);
}
}
// ..і нарешті подсвечиваем збіги на панелі управління.
for (var i=0; iІ знову нам все вдалося! Як і в попередніх прикладах в демо-прикладі пошуку з тимчасової лінійці міститься додатковий код, що містить логіку управління відтворенням і пошуком, а також фрагментом для оновлення текстових підказок на панелі управління.

Висновок

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

Загалом, HTML5 елемент track – це простий у використанні, незалежний від платформи спосіб додавання інтерактивності до ваших відео. І, незважаючи на те, що дійсно багато часу йде на написання VTT файлу і створення простих прикладів, ви помітите, що це підвищить доступність ваших відео і поліпшить взаємодію з ними. Удачі!