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调用：
$(‘.media‘).media();
jQuery Media Plugin选项
jQuery Media Plugin包括了很多选项，这些选项控制着多媒体的一些行为（需要特殊设定的属性详见）。
其默认选项如下：
// global defautls; override as needed
$.fn.media.defaults = {
standards: false, // use object tags only (no embeds for non-IE browsers)
canUndo: true, // tells plugin to store the original markup so it can be reverted via: $(sel).mediaUndo()
width: 400,
height: 400,
autoplay: 0, // normalized cross-player setting
bgColor: ‘#ffffff‘, // background color
params: { wmode: ‘transparent‘}, // added to object element as param elements; added to embed element as attrs
attrs: {}, // added to object and embed elements as attrs
flvKeyName: ‘file‘, // key used for object src param (thanks to Andrea Ercolino)
flashvars: {}, // added to flash content as flashvars param/attr
flashVersion: ‘7‘, // required flash version
expressInstaller: null, // src for express installer
// default flash video and mp3 player (@see: http://jeroenwijering.com/?item=Flash_Media_Player)
flvPlayer: ‘mediaplayer.swf‘,
mp3Player: ‘mediaplayer.swf‘,
// @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
}
};
一个简单的Demo
<script type="text/javascript">
jQuery(function() {
$(‘.media‘).media({
width: 190,
height: 126，
autoplay: false,//自动播放
src: ‘2.avi‘ //视频路径
});
});
</script>
<a href="2.avi" class="media">Watch my movie!<
/a>
运行效果：
jQuery Media Plugin