帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js
jjfat 12年前
<p>来源：<a href="/misc/goto?guid=4958523993666759543">GBin1.com</a></p> <p><a title="帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js" href="/misc/goto?guid=4958523993764267391" target="_blank"><img alt="帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js" src="http://www.gbin1.com/technology/jquerynews/20120905-jquery-plugin-bigvideojs/title.jpg" /></a> </p> <p><a class="demo" title="在线演示" href="/misc/goto?guid=4958523993855688105" target="_blank"><span style="font-size:16px;">在线演示</span></a><span style="font-size:16px;"> </span><a class="demo" title="本地下载" href="/misc/goto?guid=4958523993952876253" target="_blank"><span style="font-size:16px;">本地下载 </span></a></p> <p>是不是厌倦了千篇一律的图片为背景的网站，无论你怎么美化，或者是添加炫酷的特效，图片依旧是图片。永远无法让你的页面真正的活跃起来。</p> <p>在今天我们介绍的这款<a title="jquery" href="/misc/goto?guid=4958523994055752850" target="_blank">jQuery</a>插件 - <a title="bigvideo.js" href="/misc/goto?guid=4958523617975104377" target="_blank">bigvideo.js</a>，绝对能够让你轻松的添加超棒的全屏视频背景，让你的用户体会不一样的感受。相信你们肯定会喜欢！ </p> <h2>主要特性</h2> <ul> <li>依赖<a title="video.js" href="/misc/goto?guid=4958188553188950575" target="_blank">vidoe.js</a>，<a title="jquery" href="/misc/goto?guid=4958523994206420835" target="_blank">jQuery</a>，<a title="jqueryui" href="/misc/goto?guid=4958523994301299013">jQuery UI </a></li> <li>可现实展示播放视频列表</li> <li>能够生成自适应的视频背景</li> <li>如果不支持自动播放支持显示成图片</li> </ul> <h2>如何使用</h2> <p>导入需要的类库：</p> <pre style="z-index:1000;border-bottom:#2b99e6 1px solid;border-left:#2b99e6 1px solid;width:1000px;border-top:#2b99e6 1px solid;border-right:#2b99e6 1px solid;"><!-- 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></pre> <p>如果需要展示视频背景：</p> <pre style="z-index:auto;border-bottom:#555555 1px solid;border-left:#555555 1px solid;width:688px;border-top:#555555 1px solid;border-right:#555555 1px solid;">$(function() { var BV = new $.BigVideo(); BV.init(); BV.show('http://video-js.zencoder.com/oceans-clip.mp4'); });</pre> <p>如果需要安静的展示多个视频背景：</p> <pre style="z-index:auto;border-bottom:#555555 1px solid;border-left:#555555 1px solid;width:688px;border-top:#555555 1px solid;border-right:#555555 1px solid;">$(function() { var BV = new $.BigVideo(); BV.init(); BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true}); });</pre> <p>如果不支持自动播放的话，使用如下fallback，需要modernizr的支持：</p> <pre style="z-index:auto;border-bottom:#555555 1px solid;border-left:#555555 1px solid;width:688px;border-top:#555555 1px solid;border-right:#555555 1px solid;">var BV = new $.BigVideo(); BV.init(); if (Modernizr.touch) { BV.show('video-poster.jpg'); } else { BV.show('video.mp4',{ambient:true}); }</pre>是不是很棒，希望大家有机会能够在自己的网站中应用这个插件！ <br /> <p><span style="font-size:16px;">来源：</span><a href="/misc/goto?guid=4958523993666759543"><span style="font-size:16px;">帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js</span></a></p>