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插件一樣 簡單易用。