[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写

jQuery Media Plugin简介：

       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调用：

Code
$('.media').media();

 

2、Html代码：

Code
<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、页面运行后 <a>转化为<div>如下

Code
<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选项

jQuery Media Plugin包括了很多选项，这些选项控制着多媒体的一些行为。

其默认选项如下：

Code
// 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 
    } 
}; 

 

使用一些选项 可以定制更加个性多媒体展示方式，如下

JS调用：

Code
$('.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 
}); 

 

Html代码：

Code
<a href="myMovie.mov" class="media">Watch my movie!</a> 

 

页面运行后的结果

Code
<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> 

 

官方案例如下，请点击查看：

Video/Flash Demo

Audio Demo

sIFR Demo

Silverlight Demo

Misc Demo (pdf, html)

官方下载地址：

jquery.media.js