先看看效果~~
原理:利用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
万事俱备,刷新页面看看吧~~效果还不错..稍加美化应该能搞好.