冠富商务通中文社区

 找回密码
 立即注册
查看: 6|回复: 0
打印 上一主题 下一主题
收起左侧

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

[复制链接]
跳转到指定楼层
楼主
发表于 2017-10-3 14:30:43 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式


是不是厌倦了千篇一律的图片为背景的网站,无论你怎么美化,或者是添加炫酷的特效,图片依旧是图片。永远无法让你的页面真正的活跃起来。
在今天我们介绍的这款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
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|关于我们|申请友链|Archiver|手机版|拘留所|冠富商务通

GMT+8, 2026-5-14 12:28 , Processed in 0.050000 second(s), 12 queries , Wincache On.

Powered by HCMS Version 2.0

© 2008-05-14 guanfu.net.cn

快速回复 返回顶部 返回列表