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 媒体插件下载
在网页中嵌入播放器
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>