jQuery多媒体插件jQuery Media Plugin使用详解

jQuery 2018-12-30

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生成后的结果：

代码如下:

"
 classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"> 
 " >  
  

具体使用方法

html标记代码

代码如下:

初始化脚本：

代码如下:

选项

可以通过脚本对象或者jQuery Metadata Plugin来配置参数。

全局默认值：

代码如下:

Meta: 1,// 如果为true,则标记的Meta值优先于脚本对象 autoplay: 0,// 标准化的跨播放器设置 bgColor: '#ffffff',// 背景颜色 params: {},// 作为param元素添加到object标记中；作为属性添加到embed 标记中 attrs: {},// 作为属性添加到object以及embed中 flashvars: {},// 作为flashvars参数或属性添加到flash中 flashVersion: '7',// 需要的最低flash版本 // 默认的flash视频和mp3播放器 // @see: flvPlayer: 'mediaplayer.swf', mp3Player: 'mediaplayer.swf', // Silverlight选项 // @see silverlight: { inplaceInstallPrompt: 'true',// 在适当的位置显示安装提示 iswindowless: 'true',// 无窗口模式 framerate: '24',// 最大帧速率 version: '0.9',// Silverlight版本 onError: null,// onError回调函数 onLoad: null,// onLoad回调函数 initParams: null,// 对象初始化参数 userContext: null // 传到load回调函数的参数 } };

我们也可以在执行初始化脚本的时候传入一些option参数进去，如下代码：

代码如下:

utoplay: true } );

再如代码：

代码如下:

utoplay: 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默认为播放器和格式如下表所示：

ottom: silver 1px solid; border-left: silver 1px solid; padding-bottom: 0px; text-transform: none; background-color: rgb(255,255,255); text-indent: 0px; margin: 0px; padding-left: 0px; border-spacing: 0px; letter-spacing: normal; padding-right: 0px; border-collapse: collapse; font: 12px/18px tahoma,arial,sans-serif; white-space: normal; color: rgb(68,68,68); border-top: silver 1px solid; border-right: silver 1px solid; word-spacing: 0px; padding-top: 0px; -webkit-text-stroke-width: 0px"> ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px"> ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">

ottom: rgb(223,197,164) 0.75pt outset; border-left: rgb(223,164) 0.75pt outset; padding-bottom: 2px; margin: 0px; padding-left: 2px; padding-right: 2px; border-collapse: collapse; border-top: rgb(223,164) 0.75pt outset; border-right: rgb(223,164) 0.75pt outset; padding-top: 2px">

ottom: 0px; line-height: 1.5 !important; text-indent: 0px; margin: 10px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px">ottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-family: 宋体; color: rgb(0,0); font-size: 10pt; padding-top: 0px">