Від автора: Елемент в 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
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
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 файлу і створення простих прикладів, ви помітите, що це підвищить доступність ваших відео і поліпшить взаємодію з ними. Удачі!
