jQuery多媒体插件jQuery Media Plugin使用详解


Posted in Javascript onDecember 19, 2014

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本配置,自动将a标签替换成div,并生成object, embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容性方面非常出色。下面这段代码是jQuery Media生成后的结果:

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

具体使用方法

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>

初始化脚本:

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

选项

可以通过脚本对象或者jQuery Metadata Plugin来配置参数。

全局默认值:

$.fn.media.defaults = {

preferMeta: 1, // 如果为true, 则标记的meta值优先于脚本对象

autoplay: 0, // 标准化的跨播放器设置

bgColor: '#ffffff', // 背景颜色

params: {}, // 作为param元素添加到object标记中;作为属性添加到embed标记中

attrs: {}, // 作为属性添加到object以及embed中

flashvars: {}, // 作为flashvars参数或属性添加到flash中

flashVersion: '7', // 需要的最低flash版本

// 默认的flash视频和mp3播放器 // @see: http://jeroenwijering.com/?item=Flash_Media_Player

flvPlayer: 'mediaplayer.swf',

mp3Player: 'mediaplayer.swf',

// Silverlight选项 // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx

silverlight: {

  inplaceInstallPrompt: 'true', // 在适当的位置显示安装提示

  isWindowless: 'true', // 无窗口模式

  framerate: '24', // 最大帧速率

  version: '0.9', // Silverlight版本 onError: null, // onError回调函数

  onLoad: null, // onLoad回调函数

  initParams: null, // 对象初始化参数

  userContext: null // 传到load回调函数的参数

  }

};

我们也可以在执行初始化脚本的时候传入一些option参数进去,如下代码:

$('.media').media( { width: 400, height: 300, autoplay: true } );

再如代码:

$('.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

});

'src'选项

src选项指定了媒体文件的地址。它没有全局的默认值。如果未显示指定src选项的值,jQuery Media Plugin将使用href或者src属性的值来代替。

播放器和格式

jQuery Media Plugin默认为播放器和格式如下表所示:

播放器 文件格式
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

上表说明了,mp3格式被自动对应到了flash播放器。全局配置中的$.fn.media.defaults.mp3Player指定MP3媒体由 mediaplayer.swf文件播放。该swf文件是一个小型的mp3和flash视频播放器,可以从这里下载:http://www.longtailvideo.com/players/jw-flv-player/

SWFObject

这个脚本很常见,用来将Flash内容嵌入到网页中,你不用考虑不同平台的Flash嵌入方式。但这个文件并非必需。如果它加载了,jQuery Media Plugin将使用它,反之jQuery Media Plugin将按自己的默认方式生成object/embed标记。更多信息可以参考:http://code.google.com/p/swfobject/

iframe Player

默认情况下,PDF和HTML格式被映射到了iframe。它们将显示在iframe中而非object/embed标记中。

添加或者修改格式关联

这个操作可以由插件的mapFormat方法实现,如

$.fn.media.mapFormat('mp3','quicktime');
可用的播放器有:uicktime, flash, realplayer, winmedia, silverlight和iframe,确保播放器能够播放关联到它的文件格式。

下载

直接下载jquery.media.js文件,或者在Github上下载历史版本

注意:

此插件会把<a>转化为<div> 从而嵌套多媒体内容。此插件像其它的Jquery插件一样 简单易用。

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
List the Codec Files on a Computer
Jun 18 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
JavaScript实现两个数组的交集
Mar 25 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 #Javascript
js中匿名函数的创建与调用方法分析
Dec 19 #Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 #Javascript
浅谈Javascript如何实现匀速运动
Dec 19 #Javascript
Javascript添加监听与删除监听用法详解
Dec 19 #Javascript
Javascript 实现图片无缝滚动
Dec 19 #Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 #Javascript
You might like
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python字典基本操作实例分析
2015/07/11 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python判断telnet通不通的实例
2019/01/26 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
销售高级职员求职信
2013/10/29 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
实习评语大全
2014/04/26 职场文书
动物科学专业求职信
2014/07/27 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
培训督导岗位职责
2015/04/10 职场文书
获奖感言怎么写
2015/07/31 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android