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

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

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

Скачать 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

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

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

33 Концепции JavaScript, которые должен знать каждый разработчик
33 Концепции JavaScript, которые должен знать каждый разработчик
Как вы думаете, насколько хорошо вы знаете JavaScript? Вы, вероятно, знаете, как писать функции, понимать простые алгоритмы и даже можете написать класс. Но знаете ли вы, что такое типизированный массив?

JavaScript 101: разоблачение регулярных выражений
JavaScript 101: разоблачение регулярных выражений

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

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


JavaScript 101: сила замыканий
JavaScript 101: сила замыканий

JavaScript - это универсальный язык программирования, который допускает широкий спектр методов кодирования, включая одну из самых неправильно понимаемых функций из всех: замыкания.


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

Демистифицирующие операторы JavaScript: что означает этот символ?
Демистифицирующие операторы JavaScript: что означает этот символ?
В этой статье мы рассмотрим операторы в JavaScript один за другим. Мы объясним их функции и продемонстрируем их использование, помогая вам понять их роль в построении более сложных выражений.

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

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.