jQuery Media Plugin简介:
Jquery Media Plugin是一款页面内容嵌套多媒体的插件。支持的大部分的多媒体播放器和多媒体格式,比如:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF等等。
播放器
|
文件格式
|
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
|
此插件会把<a>转化为<div> 从而嵌套多媒体内容。此插件像其它的Jquery插件一样 简单易用。
比如:
1、JS调用:
Code
$('.media').media();
2、Html代码:
Code
<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>
3、页面运行后 <a>转化为<div>如下
Code
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="sample.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
<div>My Quicktime Movie</div>
</div>
<div class="media">
<object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
type="application/x-oleobject">
<param name="src" value="sample.swf">
<embed src="sample.swf"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer"></embed>
</object>
<div>My Flash Movie</div>
</div>
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject">
<param name="url" value="sample.wma">
<embed src="sample.wma"
type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
<div>My Audio File</div>
</div>
jQuery Media Plugin选项
jQuery Media Plugin包括了很多选项,这些选项控制着多媒体的一些行为。
其默认选项如下:
Code
// global defautls; override as needed
$.fn.media.defaults = {
preferMeta: 1, // true if markup metadata takes precedence over options object
autoplay: 0, // normalized cross-player setting
bgColor: '#ffffff', // background color
params: {}, // added to object element as param elements; added to embed element as attrs
attrs: {}, // added to object and embed elements as attrs
flashvars: {}, // added to flash content as flashvars param/attr
flashVersion: '7', // required flash version
// default flash video and mp3 player
// @see: http://jeroenwijering.com/?item=Flash_Media_Player
flvPlayer: 'mediaplayer.swf',
mp3Player: 'mediaplayer.swf',
// Silverlight options
// @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
silverlight: {
inplaceInstallPrompt: 'true', // display in-place install prompt?
isWindowless: 'true', // windowless mode (false for wrapping markup)
framerate: '24', // maximum framerate
version: '0.9', // Silverlight version
onError: null, // onError callback
onLoad: null, // onLoad callback
initParams: null, // object init params
userContext: null // callback arg passed to the load callback
}
};
使用一些选项 可以定制更加个性多媒体展示方式,如下
JS调用:
Code
$('.media').media({
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
});
Html代码:
Code
<a href="myMovie.mov" class="media">Watch my movie!</a>
页面运行后的结果
Code
<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>
官方案例如下,请点击查看:
Video/Flash Demo
Audio Demo
sIFR Demo
Silverlight Demo
Misc Demo (pdf, html)
官方下载地址:
jquery.media.js