`
tom_seed
  • 浏览: 322143 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JQuery Media插件使用

阅读更多

malsup jquery media plugin

该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF等。

前提条件是客户端浏览器中装有相应的插件。

该插件主要是将<a>标签转化为<div>,同时生成适合不同类型多媒体文件播放的<Object>对象,起到解析翻译的过程,从而达到多媒体播放的效果。转化过程是在客户端浏览器中实现,所以打开网页到出现播放器之间存在 时间差。

 

jQuery Media Plugin的主页地址:主页地址

在他的主页demo中已经很详细的讲解了JQuery Media插件的使用

 

首先是引入相应的js文件

<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.media.js"></script>

 添加页面加载完毕后需要执行的js代码

<script type="text/javascript">
$(function() {
	$('a.media').media();
});
</script>

 最后添加<a>标签

FLV<a class="media {width:250, height:250}" href="mediaplayer.swf?file=1.flv"></a>

SWF<a class="media {width:250, height:200}" href="2.swf"></a>

WMA<a class="media {width:480, height:425}" href="3.wma"></a>

WMV<a class="media {width:480, height:425}" href="4.wmv"></a>

AVI<a class="media {width:300, height:300}" href="5.avi"></a>
RM<a class="media {width:300, height:300}" href="6.rm"></a>
PDF<a


 class


="media"


 href


="guice.pdf"


>


</a>






 在浏览器中打开该文件后就能够看到效果,使用火狐浏览器打开源代码生成的内容如下

FLV<div class="media {width:250, height:250}" style="background-color: rgb(255, 255, 255); width: 250px;"><object width="250" height="250" data="mediaplayer.swf?file=1.flv" type="application/x-shockwave-flash"><param value="mediaplayer.swf?file=1.flv" name="src"><param value="#ffffff" name="bgColor"><param value="transparent" name="wmode"><param value="false" name="autoplay"><param value="" name="flashvars"><div><p><strong>需要安装插件或缺少播放器</strong></p><p>请安装Flash插件</p><p><a href="http://www.adobe.com/go/getflashplayer">点击下载</a></p></div></object></div>

SWF<div class="media {width:250, height:200}" style="background-color: rgb(255, 255, 255); width: 250px;"><object width="250" height="200" data="2.swf" type="application/x-shockwave-flash"><param value="2.swf" name="src"><param value="#ffffff" name="bgColor"><param value="transparent" name="wmode"><param value="false" name="autoplay"><param value="" name="flashvars"><div><p><strong>需要安装插件或缺少播放器</strong></p><p>请安装Flash插件</p><p><a href="http://www.adobe.com/go/getflashplayer">点击下载</a></p></div></object></div>

在IE8下生成的代码如下(以flv为例):

FLV
<DIV style="BACKGROUND-COLOR: #ffffff; WIDTH: 250px" class="media {width:250, height:250}" jQuery1606780127202784689="1">
<OBJECT codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7" classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width=250 height=250 type=application/x-oleobject>
<PARAM NAME="_cx" VALUE="6614">
<PARAM NAME="_cy" VALUE="6614">
<PARAM NAME="FlashVars" VALUE="">
<PARAM NAME="Movie" VALUE="mediaplayer.swf?file=1.flv">
<PARAM NAME="Src" VALUE="mediaplayer.swf?file=1.flv">
<PARAM NAME="WMode" VALUE="Transparent">
<PARAM NAME="Play" VALUE="0">
<PARAM NAME="Loop" VALUE="-1">
<PARAM NAME="Quality" VALUE="High">
<PARAM NAME="SAlign" VALUE="LT">
<PARAM NAME="Menu" VALUE="-1">
<PARAM NAME="Base" VALUE="">
<PARAM NAME="AllowScriptAccess" VALUE="">
<PARAM NAME="Scale" VALUE="NoScale">
<PARAM NAME="DeviceFont" VALUE="0">
<PARAM NAME="EmbedMovie" VALUE="0">
<PARAM NAME="BGColor" VALUE="FFFFFF">
<PARAM NAME="SWRemote" VALUE="">
<PARAM NAME="MovieData" VALUE="">
<PARAM NAME="SeamlessTabbing" VALUE="1">
<PARAM NAME="Profile" VALUE="0">
<PARAM NAME="ProfileAddress" VALUE="">
<PARAM NAME="ProfilePort" VALUE="0">
<PARAM NAME="AllowNetworking" VALUE="all">
<PARAM NAME="AllowFullScreen" VALUE="false">
<PARAM NAME="AllowFullScreenInteractive" VALUE="">
</OBJECT>
</DIV> 

 

这里需要注意flv格式的文件 ,该类型的显示需要指定swf文件(mediaplayer.swf),若该swf文件与需要播放的flv文件不在同一个目录下(往往都不在同一目录下)或<a>标签中文件引入有路径时,需要注意flv文件的路径,jquery media转化时默认flv文件的目录是在swf目录下,所以flv路径需要处理。可能有其他办法解决,也可能通过修改js文件来解决该问题。

示例:

FLV<a class="media {width:250, height:250}" href="video_files/mediaplayer.swf?file=../video_files/1.flv"></a>
 

 

当客户端浏览器未安装相应的插件时,jquery media插件给出了相应的提示信息。

默认信息为:

xxx插件/播放器  Required

xxx插件/播放器 is required to view this media. Download Here.

 

可以通过修改jquery.media.js文件中该部分文字或样式来完善提示的信息。

具体位置在文件的463行 附近

提示信息修改时需要注意jquery.media.js文件的文件编码需要与html页面一致,否则中文乱码

 

不知道是我这边客户端的问题还是该插件与浏览器兼容存在问题,当我未安装realplay时,在IE8下RM文件未提示该部分内容,且显示也存在问题,在FF下能够正常显示

分享到:
评论
1 楼 zhenyl1980 2015-05-21  
你好,在火狐下能播放么,我这边用你的例子,在火狐下wmv,wma视频不能播放,显示准备就绪,点击播放按钮,提示正在加载媒体(一闪而过),播放窗口黑屏。

相关推荐

    jquery media插件 在线显示pdf (兼容ie 各个版本 ,火狐,谷歌)

    由于IE浏览器在处理PDF方面存在诸多限制,jQuery Media插件通过使用ActiveX控件或其他技术,确保在IE上也能实现顺畅的PDF预览。 其次,该插件提供了一种直观且易于集成的方式。只需简单的几行代码,开发者就可以将...

    jquery media 在线预览pdf 文件插件

    本文将深入探讨jQuery Media插件的原理、使用方法及其在实际应用中的价值。 一、jQuery Media简介 jQuery Media是基于流行的JavaScript库jQuery开发的一款插件,旨在帮助开发者轻松地在网页上实现多媒体元素的集成...

    Jquery.media.js插件

    Jquery.media.js插件,包含三个文件:jquery.media.js、jquery-1.7.2.min.js、demo.html demo文件如下: &lt;html&gt; &lt;head&gt; &lt;media charset="utf-8"/&gt; [removed][removed] [removed][removed] [removed...

    jQuery Media Plugin Demo

    jQuery Media Plugin是一款专门为jQuery设计的多媒体插件,用于在网页中轻松集成音频、视频和图像等多媒体元素。这款插件的出现,极大地简化了开发者在HTML5时代处理多媒体内容的复杂性,使得开发者无需深入了解...

    jquery.media.js在线媒体播放插件

    jquery.media.js在线媒体播放插件。 jquery.media.js在线预览pdf插件。...jquery.media.js 是一个在网页中嵌入多媒体文件的前端插件,必须使用HTML标签,此插件不仅支持视频媒体播放而且还支持线预览pdf。

    jquery.media.js 插件实现在线预览PDF文件

    `jquery.media.js`就是这样一个插件,它扩展了jQuery,使其具备了处理PDF预览的能力。 2. **PDF 文件在线预览**:PDF(Portable Document Format)是一种通用的文件格式,用于保持文档的原始布局和样式。在线预览...

    jquery.media.js.zip

    今天我们要探讨的是一个基于jQuery的插件——jQuery.media.js,它为网页中的多媒体内容展示提供了丰富的支持。本文将深入解析jQuery.media.js的核心原理,并分享其在实际项目中的应用技巧。 一、jQuery.media.js...

    jquery.media.js

    jquery.media.js

    jQuery多媒体插件jQuery Media Plugin使用详解

    jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本...

    jquery.media.rar

    3. 使用jQuery调用插件:通过jQuery选择器定位到预览容器,并调用`.media()`方法,传入PDF文件的URL: ```javascript $(document).ready(function() { $('#pdf-preview').media({ src: 'path/to/your/pdf/file.pdf'...

    jquery分页插件quickpaginate的使用

    虽然QuickPaginate主要是为jQuery设计的,但它也可以与其它jQuery插件(如Bootstrap、DataTables等)配合使用,只需确保避免命名冲突和正确管理依赖关系。 7. **维护与更新** 随着技术的发展,保持插件的更新至关...

    扩展jQuery Media Plugin

    jQuery Media Plugin是一款专为jQuery设计的多媒体播放器插件,它极大地增强了网页中音频和视频的交互性与控制能力。在Web开发中,媒体元素的控制功能是不可或缺的,比如播放、暂停和停止等基本操作。这款插件的出现...

    jquery.media在线预览pdf文件

    总结来说,"jquery.media在线预览pdf文件"这个主题涵盖了使用jQuery和jQuery.media插件来实现PDF在线预览的基本步骤。然而,考虑到技术的演进,开发者应当考虑使用HTML5原生支持或更现代的解决方案,以确保更好的...

    Jquery.media.jsPDF前端预览插件

    **jQuery.media.js PDF前端预览插件** 在Web开发中,提供PDF文件的前端预览功能对于提升用户体验至关重要。jQuery.media.js是一个强大的JavaScript库,它允许开发者在网页中轻松集成多媒体内容,包括PDF文档的预览...

    240多个jQuery UI插件

    - **jQuery Media Plugin**: 支持多种媒体类型的播放插件。 - **jQuery Fl**: 该部分可能指代不完整,根据上下文推测可能是关于Flash或视频播放相关的插件。 以上插件涵盖了从简单的表单验证到复杂的多媒体处理,...

    jQuery打印插件.js

    jQuery打印插件 jQuery.print是一个用于打印页面特定部分的插件 用法 导入jQuery后将其包含在HTML中,如: &lt; script type = “ text / JavaScript ” src = “ path / to / jquery.print.js ” &gt; &lt;/ ...

    时间轴jquery插件

    首先,要使用时间轴jQuery插件,你需要确保你的项目已经包含了jQuery库。这通常通过在HTML文件的`&lt;head&gt;`部分添加jQuery的CDN链接或者下载jQuery库并将其放在本地项目中来实现。 接下来,选择一个合适的时间轴插件...

Global site tag (gtag.js) - Google Analytics