论坛首页 Web前端技术论坛

使用Fancybox+JWPlayer做弹出式播放器.

浏览 4256 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-10-16  

先看看效果~~

 

原理:利用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
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics