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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
Bootstrap布局方式详解
May 27 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
基于Vue实现微前端的示例代码
Apr 24 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实现通过ftp上传文件
2015/06/19 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
python实现的简单窗口倒计时界面实例
2015/05/05 Python
python计算圆周率pi的方法
2015/07/11 Python
详解Python中的测试工具
2019/06/09 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
《三峡》教学反思
2014/03/01 职场文书
教学质量评估实施方案
2014/03/17 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
logback 实现给变量指定默认值
2021/08/30 Java/Android
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers