免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

帮助你生成全屏视频背景的超棒jQuery插件 BigVideo.js

时间:09-13 14:53 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  是不是厌倦了千篇一律的图片为背景的网站,无论你怎么美化,或者是添加炫酷的特效,图片依旧是图片。永远无法让你的页面真正的活跃起来。在今天我们介绍的这款jQuery插件 -

帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js

在线演示  本地下载

是不是厌倦了千篇一律的图片为背景的网站,无论你怎么美化,或者是添加炫酷的特效,图片依旧是图片。永远无法让你的页面真正的活跃起来。

在今天我们介绍的这款jQuery插件 - bigvideo.js,绝对能够让你轻松的添加超棒的全屏视频背景,让你的用户体会不一样的感受。相信你们肯定会喜欢!

主要特性

1.依赖vidoe.js,jQuery,jQuery UI

2.可现实展示播放视频列表

3.能够生成自适应的视频背景

4.如果不支持自动播放支持显示成图片

如何使用

导入需要的类库:

<!-- 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

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,帮助你生成全屏视频背景的超棒jQuery插件 BigVideo.js对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与帮助你生成全屏视频背景的超棒jQuery插件 BigVideo.js无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈