jQuery多媒體外掛程式jQuery Media Plugin使用詳解_jquery

jQuery Media Plugin是一款基於jQuery的網頁媒體播放器外掛程式，它支援大部分的網路多媒體播放器和多媒體格式，比如：Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根據當前的指令碼配置，自動將a標籤替換成div，並產生object, embed甚至是iframe代碼，至於產生object還是embed，jQuery Media會根據當前平台自動判別，因此相容性方面非常出色。下面這段代碼是jQuery Media產生後的結果：

複製代碼 代碼如下:

 <div class="media">
    <object width="450" height="250" attr1="attrValue1" attr2="attrValue2"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
        <param name="src"      value="myBetterMovie.mov">
        <param name="autoplay" value="true">
        <param name="param1"   value="paramValue1">
        <param name="param2"   value="paramValue2">
        <embed width="450" height="250" src="myBetterMovie.mov" autoplay="true"
            attr1="attrValue1" attr2="attrValue2" param1="paramValue1" param2="paramValue2"
            pluginspage="http://www.apple.com/quicktime/download/" > </embed>
    </object>
</div>

具體使用方法

html標記代碼

複製代碼 代碼如下:

<a class="media" href="sample.mov">My Quicktime Movie</a>
<a class="media" href="sample.swf">My Flash Movie</a>
<a class="media" href="sample.wma">My Audio File</a>

初始化指令碼：

複製代碼 代碼如下:

$('.media').media();

選項

可以通過指令碼對象或者jQuery Metadata Plugin來配置參數。

全域預設值：

複製代碼 代碼如下:

$.fn.media.defaults = {
preferMeta: 1, // 如果為true, 則標記的meta值優先於指令碼對象
autoplay: 0, // 標準化的跨播放器設定
bgColor: '#ffffff', // 背景顏色
params: {}, // 作為param元素添加到object標記中；作為屬性添加到embed標記中
attrs: {}, // 作為屬性添加到object以及embed中
flashvars: {}, // 作為flashvars參數或屬性添加到flash中
flashVersion: '7', // 需要的最低flash版本
// 預設的flash視頻和mp3播放器 // @see: http://jeroenwijering.com/?item=Flash_Media_Player
flvPlayer: 'mediaplayer.swf',
mp3Player: 'mediaplayer.swf',
// Silverlight選項 // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
silverlight: {
  inplaceInstallPrompt: 'true', // 在適當的位置顯示安裝提示
  isWindowless: 'true', // 無視窗模式
  framerate: '24', // 最大畫面播放速率
  version: '0.9', // Silverlight版本 onError: null, // onError回呼函數
  onLoad: null, // onLoad回呼函數
  initParams: null, // 對象初始化參數
  userContext: null // 傳到load回呼函數的參數
  }
};

我們也可以在執行初始化指令碼的時候傳入一些option參數進去，如下代碼：

複製代碼 代碼如下:

$('.media').media( { width: 400, height: 300, autoplay: true } );

再如代碼：

複製代碼 代碼如下:

$('.media').media({
  width: 450,
  height: 250,
  autoplay: true,
  src: 'myBetterMovie.mov',
  attrs: { attr1: 'attrValue1', attr2: 'attrValue2' }, // object/embed attrs
  params: { param1: 'paramValue1', param2: 'paramValue2' }, // object params/embed attrs
  caption: false // supress caption text
});

'src'選項

src選項指定了媒體檔案的地址。它沒有全域的預設值。如果未顯示指定src選項的值，jQuery Media Plugin將使用href或者src屬性的值來代替。

播放器和格式

jQuery Media Plugin預設為播放器和格式如下表所示：

播放器	檔案格式
Quicktime	aif,aiff,aac,au,bmp,gsm,mov,mid, midi,mpg,mpeg,mp4,m4a,psd,qt,qtif, qif,qti,snd,tif,tiff,wav,3g2,3pg
Flash	flv, mp3, swf
Windows Media Player	asx, asf, avi, wma, wmv
Real Player	ra, ram, rm, rpm, rv, smi, smil
Silverlight	xaml
iframe	html, pdf

上表說明了，mp3格式被自動對應到了flash播放器。全域配置中的$.fn.media.defaults.mp3Player指定MP3媒體由 mediaplayer.swf檔案播放。該swf檔案是一個小型的mp3和flash視頻播放器，可以從這裡下載：http://www.longtailvideo.com/players/jw-flv-player/

SWFObject

這個指令碼很常見，用來將Flash內容嵌入到網頁中，你不用考慮不同平台的Flash嵌入方式。但這個檔案並非必需。如果它載入了，jQuery Media Plugin將使用它，反之jQuery Media Plugin將按自己的預設產生object/embed標記。更多資訊可以參考：http://code.google.com/p/swfobject/

iframe Player

預設情況下，PDF和HTML格式被映射到了iframe。它們將顯示在iframe中而非object/embed標記中。

添加或者修改格式關聯

這個操作可以由外掛程式的mapFormat方法實現，如

$.fn.media.mapFormat('mp3','quicktime');
可用的播放器有：uicktime, flash, realplayer, winmedia, silverlight和iframe，確保播放器能夠播放關聯到它的檔案格式。

下載

直接下載jquery.media.js檔案，或者在Github上下載曆史版本

注意：

此外掛程式會把<a>轉化為<div> 從而嵌套多媒體內容。此外掛程式像其它的Jquery外掛程式一樣 簡單易用。