幫助你生成全屏視頻背景的超棒jQuery插件 - BigVideo.js

來源：GBin1.com

在線演示  本地下載

是不是厭倦了千篇一律的圖片為背景的網站，無論你怎么美化，或者是添加炫酷的特效，圖片依舊是圖片。永遠無法讓你的頁面真正的活躍起來。

在今天我們介紹的這款jQuery插件 - bigvideo.js，絕對能夠讓你輕松的添加超棒的全屏視頻背景，讓你的用戶體會不一樣的感受。相信你們肯定會喜歡！

主要特性

• 依賴vidoe.js，jQuery，jQuery UI 
• 可現實展示播放視頻列表
• 能夠生成自適應的視頻背景
• 如果不支持自動播放支持顯示成圖片

如何使用

導入需要的類庫：

<!-- BigVideo Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>

如果需要展示視頻背景：

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

如果需要安靜的展示多個視頻背景：

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

如果不支持自動播放的話，使用如下fallback，需要modernizr的支持：

var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
    BV.show('video-poster.jpg');
} else {
    BV.show('video.mp4',{ambient:true});
}

是不是很棒，希望大家有機會能夠在自己的網站中應用這個插件！

來源：幫助你生成全屏視頻背景的超棒jQuery插件 - BigVideo.js