jQuery多媒體插件jQuery Media Plugin使用詳解

更新時間：2014年12月19日 17:26:44 投稿：hebedich

這篇文章主要介紹了jQuery多媒體插件jQuery Media Plugin使用詳解,需要的朋友可以參考下

jQuery Media Plugin是一款基于jQuery的網(wǎng)頁媒體播放器插件，它支持大部分的網(wǎng)絡多媒體播放器和多媒體格式，比如：Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根據(jù)當前的腳本配置，自動將a標簽替換成div，并生成object, embed甚至是iframe代碼，至于生成object還是embed，jQuery Media會根據(jù)當前平臺自動判別，因此兼容性方面非常出色。下面這段代碼是jQuery Media生成后的結果：

復制代碼代碼如下:

具體使用方法

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來配置參數(shù)。

全局默認值：

復制代碼代碼如下:

$.fn.media.defaults = {
preferMeta: 1, // 如果為true, 則標記的meta值優(yōu)先于腳本對象
autoplay: 0, // 標準化的跨播放器設置
bgColor: '#ffffff', // 背景顏色
params: {}, // 作為param元素添加到object標記中；作為屬性添加到embed標記中
attrs: {}, // 作為屬性添加到object以及embed中
flashvars: {}, // 作為flashvars參數(shù)或?qū)傩蕴砑拥絝lash中
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', // 在適當?shù)奈恢蔑@示安裝提示
isWindowless: 'true', // 無窗口模式
framerate: '24', // 最大幀速率
version: '0.9', // Silverlight版本 onError: null, // onError回調(diào)函數(shù)
onLoad: null, // onLoad回調(diào)函數(shù)
initParams: null, // 對象初始化參數(shù)
userContext: null // 傳到load回調(diào)函數(shù)的參數(shù)
}
};

我們也可以在執(zhí)行初始化腳本的時候傳入一些option參數(shù)進去，如下代碼：

復制代碼代碼如下:

$('.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內(nèi)容嵌入到網(wǎng)頁中，你不用考慮不同平臺的Flash嵌入方式。但這個文件并非必需。如果它加載了，jQuery Media Plugin將使用它，反之jQuery Media Plugin將按自己的默認方式生成object/embed標記。更多信息可以參考：http://code.google.com/p/swfobject/

iframe Player

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

添加或者修改格式關聯(lián)

這個操作可以由插件的mapFormat方法實現(xiàn)，如

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

下載

直接下載jquery.media.js文件，或者在Github上下載歷史版本

注意：

此插件會把<a>轉化為<div> 從而嵌套多媒體內(nèi)容。此插件像其它的Jquery插件一樣簡單易用。

您可能感興趣的文章: