`
superxielei
  • 浏览: 266627 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

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

 
阅读更多

先看看效果~~

 

原理:利用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+fancybox+struts2实现的日程安排效果。 前台采用fullCalendar实现日历效果,同一天可以增加多个日程安排,当效果超过配置的最大数量时,将会隐藏多余的日程安排,通过单击超链接显示当天的所有日程安排...

    jquery+fancybox图片切换特效.zip

    jquery+fancybox图片切换特效, ${path}/js/fancybox/css/global.css" rel="stylesheet" type="text/css"&gt; ${path}/js/fancybox/css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"&gt; ${path}/js/...

    使用jQuery插件FancyBox轻松实现弹窗视频

    jQuery插件FancyBox就是这样一款强大的工具,它能够帮助开发者轻松地创建出美观且功能丰富的弹窗效果,包括视频展示。本文将详细介绍如何使用FancyBox实现弹窗视频的功能。 首先,我们需要了解jQuery和FancyBox的...

    jquery fancybox 弹出层

    这段代码将使所有带有`fancybox`类的链接使用Fancybox弹出图片。 ### 2. 多媒体支持 Fancybox不仅支持图片,还能展示HTML内容、iFrame、YouTube 视频等。例如,若要弹出一个包含HTML内容的弹出层,可以这样做: `...

    fancybox v1.3.4 jQ插件.zip

    Fancybox v1.3.4 是一款基于 jQuery 的流行轻量级弹出窗口插件,专用于创建引人入胜的图像、视频和其他媒体展示。这个版本发布于2011年,虽然现在可能已有更新版本,但在当时,它是许多网站进行富媒体展示的首选工具...

    超炫的弹出层效果(Fancybox)

    1. **响应式设计**:Fancybox适应不同设备的屏幕尺寸,无论是在桌面还是移动设备上都能呈现出良好的视觉效果。 2. **交互性**:用户可以通过键盘导航、触摸滑动等交互方式来浏览内容,提高用户体验。 3. **自定义...

    jquery 弹出层插件FancyBox弹出层演示支持图片、文章

    《jQuery弹出层插件FancyBox:图片与文章的精彩呈现》 在网页设计中,弹出层(Modal)是一种常见的交互元素,用于显示详细信息或者进行特定操作,而jQuery作为JavaScript的一个强大库,提供了丰富的插件来实现这一...

    Fancybox丰富的弹出层效果

    Fancybox是一款基于jQuery的轻量级插件,用于创建优雅且功能丰富的弹出层效果。它主要用于展示图像、HTML内容、视频以及通过Ajax加载的远程内容。在网页设计和开发中,Fancybox提供了用户友好的界面,使得内容的展示...

    ASP.NET整合fancybox弹出页面实例讲解

    在这个实例中,我们将探讨如何将ASP.NET与fancybox结合,实现弹出页面的效果。 fancybox是一款流行的JavaScript库,主要用于创建轻量级的弹出窗口,通常用于展示图片、HTML内容或IFrame。它提供了美观的过渡效果和...

    jquery.fancybox-1.3.4

    《jQuery Fancybox 1.3.4:图片弹出大图技术详解》 在Web开发领域,优雅地展示图片是一项常见的需求。jQuery Fancybox插件以其简洁的API和丰富的自定义选项,成为开发者们实现图片弹出大图效果的首选工具之一。本文...

    fancybox.js 图片显示

    Fancybox是一款流行的JavaScript轻量级图像查看器,常用于网页中的图片展示,提供美观的弹出窗口效果,支持图片轮转、缩放、导航等多种功能。这个“fancybox.js 图片显示”主题主要涵盖以下几个核心知识点: 1. **...

    jquery.fancybox图片放大显示插件用法演示.rar

    jQuery Fancybox 无刷新放大图片的一个小插件,这种效果多见于一些网页相册中,看上去比较不错的效果,小图片点击后显示大图片,大图片右上角可关闭,这里使用的是一个有名的jquery插件:jquery.fancybox.js这个插件...

    超炫的弹出层效果Fancybox

    通过解压并研究这些文件,你可以更深入地了解Fancybox的使用和配置,以便在实际项目中灵活运用这个强大的弹出层工具。 总之,Fancybox是创建弹出层效果的理想选择,无论是简单的图片展示还是复杂的多媒体内容,它都...

    jquery.fancybox

    2. **标记内容**:使用特定的class或者data属性标记需要弹出的元素,如`&lt;a class="fancybox" href="image.jpg"&gt;Click me&lt;/a&gt;`。 3. **初始化插件**:在jQuery的$(document).ready()函数中调用`.fancybox()`方法,...

    前端项目-fancybox.zip

    **前端项目 - fancybox** ...总之,fancybox 作为一个强大的前端工具,能帮助开发者轻松创建出优雅、实用的弹出窗口,提升网站的整体质量和用户体验。在实际开发中,只需合理配置和定制,就能将其潜力充分发挥出来。

    fancybox.rar

    3. **设置HTML结构**:为要展示的图片或内容添加特定的HTML标记,Fancybox会识别这些标记来启动弹出窗口。 4. **初始化Fancybox**:在页面加载完成后,使用JavaScript调用Fancybox函数来初始化插件,指定要处理的...

    fancyBox中文文档(教程).docx

    fancyBox提供了多个可选插件,如`fancybox-buttons`用于添加按钮式导航,`fancybox-thumbs`用于显示缩略图导航,以及`fancybox-media`用于处理多媒体内容。在使用这些插件时,需要额外引入对应的CSS和JavaScript...

    jquery.fancybox-1.2.6

    jQuery Fancybox 是一款广泛使用的JavaScript 图片和媒体展示插件,特别适用于网页上的图像展示。它以其简洁的API、丰富的自定义选项以及优雅的用户体验而受到开发者的青睐。在本文中,我们将深入探讨Fancybox 1.2.6...

    fancybox-master.zip

    Fancybox 是一个流行的轻量级JavaScript插件,用于在网页上创建优雅的弹出框,展示各种媒体类型,如图片、视频、iframe以及内联和Ajax内容。在fancybox v3.5.7版本中,它提供了丰富的功能和自定义选项,以适应不同...

Global site tag (gtag.js) - Google Analytics