Блог

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

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

Посмотреть демо

Скачать 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, а затем используйте их прямую ссылку на видео в формате mp4Vimeo не только имеет солидную пропускную способность для передачи видео, оно еще применяет замечательное сжатие. 

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

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

Понравилась статья? Поделитесь

Вас может заинтересовать:

  • Настал 2016. Обновите свой footer

    У каждого сайта в footer (футер) указываются выходные данные компании, а также год создания и текущий год. Актуальность этих данных говорит о том, что сайт жив и обновляется. Это важно, если хотите, чтобы сайт вызывал доверие.

  • Как создать сайт?

    Многие начинающие пользователи интернета задают себе данную фразу. Но не у всех выходит добиться желаемого... Всё связано с различными стереотипами, например, о том, что для создания сайта или личной странички в интернете требуются навыки и знание программирования... Прочитайте статью и создайте свой сайт.

  • Игорь Бондаренко

    разработчик 

  • Динамические элементы JavaScript для безостановочной загрузки сценариев

    Сценарии JavaScript блокируют загрузку файлов, следующих за ними. Но имеется несколько приемов, предотвращающих это…

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ