jQuery Media多媒体插件下载与个性化配置详解

jQuery Media多媒体插件下载与个性化配置详解

摘要:  jQuery Media 插件及其使用详解，jQuery media Plugin 通过选项配置与个性化定制可以自动将页面上指向媒体文件的链接转成嵌入播放器的...

jQuery Media 插件及其使用详解，jQuery media Plugin 通过选项配置与个性化定制可以自动将页面上指向媒体文件的链接转成嵌入播放器的页面，还可以隐式地将标准的标记转变为富媒体内容，jQuery Media Plugin 多媒体插件，jquery 视频播放器，jquery media player ，jquery.media.js 。

jQuery media Plugin 可以用来在网页中嵌入几乎任何媒体格式，包含 Flash 、Quicktime 、Windows Media Player 、Real Player 、MP3 、Silverlight 、PDF 等，这个插件将元素转变为容纳用于渲染媒体内容的 object 、embed 甚至是 iframe 的 div 元素。

Media 媒体插件下载

jquery.media.js 下载

在网页中嵌入播放器

1、JS调用

以下为引用内容： 
$('.media').media();

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

-

3、运行结果

jQuery media Plugin 在网页中嵌入媒体格式后运行结果

以下为引用内容： 
<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 包括很多选项，以控制多媒体的播放方式。

默认选项

以下为引用内容： 
// 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 
} 
};

定制多媒体个性化展示方式

jQuery media Plugin 定制个性化多媒体展示方式

1、JS调用

以下为引用内容： 
$('.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 
});

2、Html 代码

以下为引用内容： 
<a href="myMovie.mov" class="media">Watch my movie!</a> 

3、运行结果

以下为引用内容： 
<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>