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>
执行效果:
也可使用以下浏览器生成的方法:
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" width="880" height="450"> <param NAME="AutoStart" VALUE="0"> <param name="url" value="$!fileUrl/$!infoseach.attUrl"> //动态给路径 <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object> </div>