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

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 {250, height:250}" href="mediaplayer.swf?file=1.flv"></a>
SWF<a class="media {250, height:200}" href="2.swf"></a>
WMA<a class="media {480, height:425}" href="3.wma"></a>
WMV<a class="media {480, height:425}" href="4.wmv"></a>
AVI<a class="media {300, height:300}" href="5.avi"></a>
RM<a class="media {300, height:300}" href="6.rm"></a>
<code class="mix"><span class="tag">PDF<a</span>
<span class="aname">&nbsp;class</span>
=<span class="string">"media"</span>
<span class="aname">&nbsp;href</span>
=<span class="string">"guice.pdf"</span>
<span class="tag"></span>
<span class="tag"></a></span>
</code>

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

FLV<div class="media {250, height:250}" style="background-color: rgb(255, 255, 255);  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 {250, height:200}" style="background-color: rgb(255, 255, 255);  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 {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 {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下能够正常显示