Посмотреть демо
Скачать bigvideo.js
Тема уже не новая, но хочется еще раз ее затронуть, т.к. она набирает обороты. Хотя и очень медленно. Возможно, проблема создания таких сайтов в связана с созданием или поиском подходящего видео. Лично мне такие сайты вполне симпатичны, привлекают внимание, а главное, задерживают посетителя на сайте, тем самым улучшая поведенческие факторы.
И так, по порядку.
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