Добавляем Видео в качестве фона страницы сайта

MasterNik / 25 августа 2013 г. / 2692

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

И так, по порядку.

1. Для создания фонового видео и изображения нам понадобится jQUERY плагин BIGVIDEO.js, созданный John Polacek из Чикаго.

Этот плагин позволяет легко добавлять видео в качестве фона, проигрывая заданное видео или предоставляя возможность использования плейлиста. Так же с его помощью можно демонстрировать большие фоновые изображения.

УСТАНОВКА

BigVideo.js использует Video.js API. Он также требует JQuery, JQuery UI (для ползунка) и imagesloaded JQuery плагин. Убедитесь, что у вас подключены все эти библиотеки при использовании BigVideo.js.

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

$  (function  () {
 var BV = new $.BigVideo  ();
 BV.init  ();
 BV.show  ('http://video-js.zencoder.com/oceans-clip.mp4');
});

Для достижения наилучших результатов в Firefox, создайте версию Ogg (формат воспроизведения потокового видео) вашего видео и настроите BigVideo.js, как показано ниже:

$  (function  () {
 var BV = new $.BigVideo  ({useFlashForFirefox:false});
 BV.init  ();
 BV.show  ('vids/river.mp4', {altSource:'vids/river.ogv'});
});

Для воспроизведения видео на фоне страницы без звука, используйте следующий код:

$  (function  () {
 var BV = new $.BigVideo  ();
 BV.init  ();
 BV.show  ('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});

Для проигрывания серии видео файлов в качестве фона, используем нижеприведенный код:

$  (function  () {
 var BV = new $.BigVideo  ();
 BV.init  ();
 BV.show  (['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});

Имейте в виду, что мобильные устройства не позволяют автозапуск видео. Чтобы обойти это, используйте Modernizr для обнаружения устройств с сенсорными экранами, чтобы затем отправить большое изображение для BigVideo вместо видео:

var BV = new $.BigVideo  ();
BV.init  ();
if  (Modernizr.touch) {
 BV.show  ('video-poster.jpg'); } else {
 BV.show  ('video.mp4',{ambient:true});
}

НАПОСЛЕДОК

Для достижения наилучших результатов, я рекомендую использовать Vimeo. Подпишитесь на Vimeo Pro, а затем используйте их прямую ссылку на видео в формате mp4. Vimeo не только имеет солидную пропускную способность для передачи видео, оно еще применяет замечательное сжатие.

Видеоролики для фона своего сайта вы можете подобрать, например, с помощью этого сайта Neo's Clip Archive .

Источник информации - dfcb.github.io/BigVideo.js