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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
destoon二次开发入门示例
2014/06/20 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
运动会通讯稿50字
2014/01/30 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫