BigVideo.js

jQuery плагин для проигрывания Видео в фоне сайта (и больших изображений )

Этот плагин позволяет легко добавить подходят к заполнению фоновое видео на веб-сайты. Он может играть тихую окружающего фона видео (или ряд видео). �ли использовать его в качестве игрока, чтобы показать видео плейлист. BigVideo.js может также показать большие фоновые изображения, что является хорошо иметь для показа большие фоновые изображения для устройств, которые не имеют автозапуск для окружающей видео.

BigVideo.js is built on top of Video.js from zencoder. So big thanks to them!

You can read about how to use BigVideo.js below. Also, check out the tutorial I wrote for Codrops.

Скачать: zip tar examples bower install BigVideo.js

Установка

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

Чтобы просто играть видео, которая занимает все окно браузера (как в данном примере ), сделайте следующее:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('mp4/oceans.mp4');
});

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

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

Ambient Video

Для воспроизведения тихий видео на фоне страницы (как в данном примере ), используйте параметр окружающей среды BigVideo в:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('mp4/oceans.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});
}

Playlists

Вы можете создать список воспроизведения, как это:

Более подробную информацию о том, как это сделать, в том числе содержания Автоматическое скрытие и альтернативной полноэкранном содержания изображения для устройств с сенсорными экранами, взгляните на этом примере ..

Playlist clips courtesy of Beachfront B-Roll

Video.js

Потому BigVideo.js построен на вершине Video.js , вы можете использовать API Video.js . Доступ к игроку Video.js с помощью метода getPlayer ().

BV.getPlayer().pause();