快捷導(dǎo)航

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

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

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

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

復(fù)制代碼代碼如下:

具體使用方法

html標(biāo)記代碼

復(fù)制代碼代碼如下:

<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>

初始化腳本：

復(fù)制代碼代碼如下:

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

選項(xiàng)

可以通過(guò)腳本對(duì)象或者jQuery Metadata Plugin來(lái)配置參數(shù)。

全局默認(rèn)值：

復(fù)制代碼代碼如下:

$.fn.media.defaults = {
preferMeta: 1, // 如果為true, 則標(biāo)記的meta值優(yōu)先于腳本對(duì)象
autoplay: 0, // 標(biāo)準(zhǔn)化的跨播放器設(shè)置
bgColor: '#ffffff', // 背景顏色
params: {}, // 作為param元素添加到object標(biāo)記中；作為屬性添加到embed標(biāo)記中
attrs: {}, // 作為屬性添加到object以及embed中
flashvars: {}, // 作為flashvars參數(shù)或?qū)傩蕴砑拥絝lash中
flashVersion: '7', // 需要的最低flash版本
// 默認(rèn)的flash視頻和mp3播放器 // @see: http://jeroenwijering.com/?item=Flash_Media_Player
flvPlayer: 'mediaplayer.swf',
mp3Player: 'mediaplayer.swf',
// Silverlight選項(xiàng) // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
silverlight: {
inplaceInstallPrompt: 'true', // 在適當(dāng)?shù)奈恢蔑@示安裝提示
isWindowless: 'true', // 無(wú)窗口模式
framerate: '24', // 最大幀速率
version: '0.9', // Silverlight版本 onError: null, // onError回調(diào)函數(shù)
onLoad: null, // onLoad回調(diào)函數(shù)
initParams: null, // 對(duì)象初始化參數(shù)
userContext: null // 傳到load回調(diào)函數(shù)的參數(shù)
}
};

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

復(fù)制代碼代碼如下:

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

再如代碼：

復(fù)制代碼代碼如下:

$('.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'選項(xiàng)

src選項(xiàng)指定了媒體文件的地址。它沒(méi)有全局的默認(rèn)值。如果未顯示指定src選項(xiàng)的值，jQuery Media Plugin將使用href或者src屬性的值來(lái)代替。

播放器和格式

jQuery Media Plugin默認(rèn)為播放器和格式如下表所示：

播放器	文件格式
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

上表說(shuō)明了，mp3格式被自動(dòng)對(duì)應(yīng)到了flash播放器。全局配置中的$.fn.media.defaults.mp3Player指定MP3媒體由 mediaplayer.swf文件播放。該swf文件是一個(gè)小型的mp3和flash視頻播放器，可以從這里下載：http://www.longtailvideo.com/players/jw-flv-player/

SWFObject

這個(gè)腳本很常見(jiàn)，用來(lái)將Flash內(nèi)容嵌入到網(wǎng)頁(yè)中，你不用考慮不同平臺(tái)的Flash嵌入方式。但這個(gè)文件并非必需。如果它加載了，jQuery Media Plugin將使用它，反之jQuery Media Plugin將按自己的默認(rèn)方式生成object/embed標(biāo)記。更多信息可以參考：http://code.google.com/p/swfobject/

iframe Player

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

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

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

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

下載

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

注意：

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

您可能感興趣的文章: