先看看效果~~
原理:利用Fancybox弹出一个flash,这个flash正是JWPlayer,给JWPlayer设置播放视频的参数,进行播放.
很简单吧..代码也不多.看看就知道了.
<a href="${base}/mediaplayer/player.swf?file=${base}/${online.video}&autostart=true" class="online_video_a"><img
class="cursor_pointer online_video" src="${base}/outlook/player.png" alt="播放视频"
width="100" height="75" /></a>
有一个a标记,设置class为online_video_a备用.href为JWPlayer播放器地址.并在播放器后面加入视频地址.设置自动播放.a内是图片还是文字,就看你自己了.
$('a.online_video_a').fancybox({
'type' : 'swf',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
获得所有class为online_video_a的元素进行迭代,设置fancybox属性type:swf
万事俱备,刷新页面看看吧~~效果还不错..稍加美化应该能搞好.
- 大小: 191.3 KB
分享到:
相关推荐
fullCalendar+fancybox+struts2实现的日程安排效果。 前台采用fullCalendar实现日历效果,同一天可以增加多个日程安排,当效果超过配置的最大数量时,将会隐藏多余的日程安排,通过单击超链接显示当天的所有日程安排...
使用jQuery插件FancyBox轻松实现弹窗视频,使用jQuery插件FancyBox轻松实现弹窗视频
jquery+fancybox图片切换特效, ${path}/js/fancybox/css/global.css" rel="stylesheet" type="text/css"> ${path}/js/fancybox/css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"> ${path}/js/...
jquery fancybox 绚丽弹出层效果 子父页面传值 在chrome浏览器 只有在服务器上才能正确的运行子父页面传值的效果 本地没有效果
jquery.fancybox-1.3.4图片弹出大图片示例
jquery 弹出层插件FancyBox弹出层演示支持图片、文章
Fancybox丰富的弹出层效果 jQuery
jQuery Fancybox 无刷新放大图片的一个小插件,这种效果多见于一些网页相册中,看上去比较不错的效果,小图片点击后显示大图片,大图片右上角可关闭,这里使用的是一个有名的jquery插件:jquery.fancybox.js这个插件...
官方离线安装包,亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
用于改善前端弹出层的效果,非常的好用,前端弹出层用的是Fancybox插件实现的的。
prettyPhoto和fancybox弹出层插件对比
fancybox v1.3.4 jQ插件.zip
ASP.NET整合fancybox弹出页面实例讲解,绝对不坑人,大伙瞧瞧哦。。。
jquery 弹出层插件,图片点击放大插件推荐FancyBox,版本为2.1.7 效果查看http://fancyapps.com/fancybox/ 或者https://www.baiyongj.com/event/fancybox-2.1.7/index.html
fancybox 图片轮转显示
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片、图片集、Ajax数据,还能加载SWF影片,...
建筑Gulp + Webpack(Pug,手写笔) ...在默认程序jquery,normalize.css,bootstrap.css,fancybox,swiper,inputmask : jquery,normalize.css,bootstrap.css,fancybox,swiper,inputmask 字母布局的好指南
主要介绍了jQuery弹层插件jquery.fancybox.js用法,结合实例形式分析了jQuery弹出层插件jquery.fancybox.js的功能、用法与相关注意事项,需要的朋友可以参考下
fancybox-1.3.4 插件,Fancybox丰富的弹出层效果,简单实用易上手