Как управлять сайтом с помощью видео

Как управлять сайтом с помощью видео

Всем привет, в этой статье мы поговорим о видео контенте и его интеграции в сайт.

Сегодня вставить видео на сайт очень просто. В то же время самому сделать видео интересным, а тем более интерактивным - задача уже намного сложнее.

А что если я Вам скажу, что можно выйти за пределы видео и подстраивать сайт под события в видео. Интересно? Тогда поехали!

Содержание статьи:

Интерактивное видео

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

К этому трюку часто прибегают рекламщики, чтобы именно их реклама запомнилась потенциальному клиенту. Так как по сути от выбора человека будет зависеть, в чем пойдет Маша на свидание:

Довольно забавно, не правда ли?

Так же на этом принципе можно организовывать что-то вроде викторины:

Видео, которое управляет сайтом

Интерактивные видео - это интересно, но еще интереснее, когда видео управляет целой страницей. Я думаю, все видели телевизоры, которые освещают стену позади себя в цветовую гамму, которая преобладает на экране в данный момент. Это позволяет вызвать при просмотре более яркие эмоции, чем при просмотре обычного телевизора.

Конечно, я не написал библиотеку для определения цветовой гаммы на видео, но постарался на базовом уровне показать сам принцип управлением страницей в зависимости от тайминга видеоролика.

Весь код я оформил в jQuery плагины. В качестве источника видео будем использовать youtube и vimeo.

Плагин для Youtube

Cначала давайте посмотрим на весь плагин целиком, а ниже я опишу его подробнее:

html
1
2
3
<script src="https://www.youtube.com/iframe_api"></script>
<iframe id="player" type="text/html" width="560" height="315" src="https://www.youtube.com/embed/5v1BXnivmcg?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Загружаем стандартную библиотеку от youtube для работы с видео. И так же не забываем в параметрах к видео указать enablejsapi=1, для того, чтобы включить выполнение скриптов.

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
(function($) {
jQuery.fn.youtubeInteractivVideo = function(opt) {
opt = $.extend({
action: {} // Ключ - время, значение - действие
}, opt);
let make = function() {
let timer, time, player;
// Создадим новый плеер
// В конструктор передается id видео и объект
// который может содержать несколько полей-событий
player = new YT.Player(this.id, {
events: {
// Состояние плеера
'onStateChange': function(e) {
switch (e.data) {
case 1: // воспроизведение
timer = setInterval(getVideoAction, 1000);
break;
case 2: // пауза
clearInterval(timer);
break;
case 0: // видео закончилось
clearInterval(timer);
break;
}
},
// Событие ошибки
'onError': function(e) {
// В рабочем варианте кода желательно написать более умный обработчик ошибок!
console.error('ERROR Video');
}
}
});
// В этой функции и происходит все действие
function getVideoAction() {
// Пробегаемся по входящему объекту
for (let time in opt.action) {
// Преобразуем время в удобное нам значение в секундах (было 1.00 стало 60)
let _time = String(time).split('.');
_time = Number(_time[0]) * 60 + Number(_time[1]);
// Пропускаем поля только нашего объекта
if (!opt.action.hasOwnProperty(time)) {
continue;
}
// Сравниваем время на видео со временем из настроек
if (player.getCurrentTime() >= _time) {
// Вызываем относящийся ко времени колбэк
opt.action[time]();
}
}
}
};
return this.each(make);
};
})(jQuery);
// Вызываем плагин
// Обязательно помещайте вызов плагина в функцию onYouTubeIframeAPIReady
window.onYouTubeIframeAPIReady = function() {
$('#player').youtubeInteractivVideo({
action: {
'1.00': function() {
$('body').css('background-color', 'red');
},
'2.00': function() {
$('body').css('background-color', 'blue');
},
}
});
};

В [ Документации к Youtube ] Вы сможете найти много интересных возможностей плеера, мы же используем только малую их часть.

Назвал я плагин youtubeInteractivVideo - не самое лаконичное название. Я думаю Вы сможете придумать что-то поинтереснее.

Плагин принимает в качестве параметра объект, где ключ - это время события, а значение - это само событие (анонимная функция). Например:

javascript
1
2
3
4
5
{
'1.23': function() {
console.log('Время на видео - 1.23');
}
}

На строчке 13 мы создаем новый плеер. Ему мы передаем 2 параметра: id видео и объект с событиями.

onStateChange - событие изменения состояния плеера. Оно принимает один параметр - идентификатор состояния data:

  • -1 (воспроизведение видео не начато)
  • 0 (воспроизведение видео завершено)
  • 1 (воспроизведение)
  • 2 (пауза)
  • 3 (буферизация)
  • 5 (видео подают реплики).

Мы из этого используем 0, 1, 2

onError - это событие вызывается в случае ошибки плеера. Оно принимает один параметр - идентификатор состояния data:

  • 2 - запрос содержит недопустимое значение параметра. Например, ошибка возникает при указании идентификатора видео, состоящего из менее 11 символов или содержащего недопустимые символы (восклицательный знак, символ звездочки и т. д.).
  • 5 - ошибка воспроизведения запрошенного содержимого в проигрывателе HTML или другая ошибка, связанная с работой проигрывателя HTML.
  • 100 - запрошенное видео не найдено. Эта ошибка возникает, если видео было удалено (по любой причине) или помечено как частное.
  • 101 - владелец запрошенного видео запретил его воспроизведение во встроенных проигрывателях.
  • 150 - ошибка, аналогичная ошибке 101. Это другой код для ошибки 101.

У youtube в API есть глобальное событие onYouTubeIframeAPIReady, которое срабатывает после полной загрузки видео и всех нужных ему скриптов. Его мы и используем для обёртки нашего плагина.

Хочу обратить внимание на несколько важных моментов:


1) Глобальное событие нужно писать window.onYouTubeIframeAPIReady иначе работать не будет.
2) Обработчик ошибок в рабочем коде желательно сделать умным.


Демо примеры для Youtube

See the Pen youtube interactive video by Alexandr (@login2030) on CodePen.

Так же можно совместить наш плагин с плагином загрузки видео по требованию. Для этого плагин конечно придется немного доработать:

  • Добавить id для iframe
  • Добавить колбэк после запуска видео
  • Включить javascript (добавим параметр для видео enablejsapi=1)

See the Pen videoLoader & youtube interactive video by Alexandr (@login2030) on CodePen.

Плагин для Vimeo

Грузим библиотеку для работы с видео и вставляем само видео на сайт:

html
1
2
3
<script src="https://player.vimeo.com/api/player.js"></script>
<iframe id="video" src="https://player.vimeo.com/video/199550779" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></iframe>

А теперь сам плагин с вызовом:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
(function($) {
jQuery.fn.vimeoInteractivVideo = function(opt) {
opt = $.extend({
action: {} // Ключ - время, значение - действие
}, opt);
let make = function() {
let timer, time, player;
// Создаем новый экземпляр плеера
player = new Vimeo.Player(this.id);
// Видео проигрывается
player.on('play', function() {
timer = setInterval(function() {
player.getCurrentTime().then(function(s) {
getVideoAction(s);
}).catch(function(err) {
console.error('video ERROR', err);
});
}, 1000);
});
// Видео на паузе
player.on('pause', function() {
clearInterval(timer);
});
// Видео закончилось
player.on('ended', function() {
clearInterval(timer);
});
// В этой функции и происходит все действие
function getVideoAction(s) {
// Пробегаемся по входящему объекту
for (let time in opt.action) {
// Пропускаем поля только нашего объекта
if (!opt.action.hasOwnProperty(time)) {
continue;
}
let _time = String(time).split('.');
_time = Number(_time[0]) * 60 + Number(_time[1]);
if (s >= _time) {
opt.action[time]();
}
}
}
};
return this.each(make);
};
})(jQuery);
// Вызываем плагин
$('#video').vimeoInteractivVideo({
action: {
'0.00': function() {
$('body').css('background-color', 'skyblue');
},
'0.03': function() {
$('body').css('background-color', 'orange');
},
'0.06': function() {
$('body').css('background-color', 'yellow');
},
}
});

В [ Документации к Vimeo ] Вы сможете найти много интересных возможностей плеера, мы же используем только малую их часть.

Как видите, плагин выглядит еще проще, чем для youtube. Давайте разберем его.

На 11 строчке создаем новый плеер и передаем ему идентификатор iframe.

У плеера есть несколько событий. Полный их список есть в документации, ссылку на неё я давал выше. Нас же интересуют только три ([ Ссылка на события ]) :

  • play - видео воспроизводится
  • pause - видео поставлено на паузу
  • ended - видео закончилось

Демо примеры для Vimeo

See the Pen vimeo interactive video by Alexandr (@login2030) on CodePen.

Также можно совместить наш плагин с плагином загрузки видео по требованию. Для этого плагин, конечно, придется немного доработать:

  • Добавить id для iframe
  • Добавить колбэк после запуска видео

See the Pen videoLoader & vimeo interactive video by Alexandr (@login2030) on CodePen.

Заключение

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

Важно помнить, что код в этой статье не претендует быть самым оптимальным и самым лучшим.