[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插件一样 简单易用。

比如:

1JS调用:

[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写Code
$('.media').media();

 

2Html代码:

[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写Code
<class="media" href="sample.mov">My Quicktime Movie</a> 
<class="media" href="sample.swf">My Flash Movie</a> 
<class="media" href="sample.wma">My Audio File</a> 

 

3、页面运行后 <a>转化为<div>如下

[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写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包括了很多选项,这些选项控制着多媒体的一些行为。

其默认选项如下:

[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写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调用:

[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写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代码:

[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写Code
<href="myMovie.mov" class="media">Watch my movie!</a> 

 

页面运行后的结果

[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写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

 

 

 

 

 

版权

作者:灵动生活 郝宪玮

出处:http://www.cnblogs.com/ywqu

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

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

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

上一篇:c#通过反射获取类上的自定义特性


下一篇:[Unity3D]playMaker插件