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> <code class="mix"><span class="tag">PDF<a</span> <span class="aname"> class</span> =<span class="string">"media"</span> <span class="aname"> href</span> =<span class="string">"guice.pdf"</span> <span class="tag"></span> <span class="tag"></a></span> </code>
在瀏覽器中打開該文件后就能夠看到效果，使用火狐瀏覽器打開源代碼生成的內容如下
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下能夠正常顯示