Фоновое видео для сайта на весь экран Фоновое видео для сайта на весь экран



 

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

 

ДЕМО
ИСХОДНИКИ

 

Особенность данного плагина в том, что видео автоматически растягивается на любой размер экрана. Плагин BigVideo.js для jQuery добавляет на страницу видео в качестве фонового изображения через HTML5 Fullscreen API. И так приступим. Для работы нужно предварительно загрузить библиотеки jQuery, jQuery UI и jQuery imagesloaded. Запуск:

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

В качестве хостинга своих видеороликов удобно использовать Vimeo Pro, он даёт прямую ссылку на mp4-файл и отгружает контент со скоростью более 10 Мбит/с.

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

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

Вот и все. Готово!

Материал взят из зарубежного источника - dfcb.github.com/BigVideo.js и представлен исключительно в ознакомительных целях.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!