jQuery多媒体播放器插件jQuery Media Plugin使用方法
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 |
mediaplayer.swf
上表说明了,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,确保播放器能够播放关联到它的文件格式。
在线demo
下载
直接下载jquery.media.js文件,或者在Github上下载历史版本
参考文章:jQuery Media Plugin:更方便地展示你的多媒体
jQuery多媒体播放器插件jQuery Media Plugin使用方法的更多相关文章
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- jquery的延迟加载插件Lazy Load Plugin for jQuery
下载:https://github.com/tuupola/jquery_lazyload 使用:http://www.appelsiini.net/projects/lazyload 翻译:http ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- jQuery瀑布流插件——jQuery.Waterfall
插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...
- jquery上传插件Jquery.uploadify.js-转
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- Jquery中日期插件jquery.datepick的使用
jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- jQ效果:jQuery时间轴插件jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- jQuery 鼠标滚轮插件 jquery.mousewheel.js
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过 ...
随机推荐
- MySQL大事务导致的Insert慢的案例分析
[问题] 有台MySQL服务器不定时的会出现并发线程的告警,从记录信息来看,有大量insert的慢查询,执行几十秒,等待flushing log,状态query end [初步分析] 从等待资源来看, ...
- Gumbel-Softmax Trick和Gumbel分布
之前看MADDPG论文的时候,作者提到在离散的信息交流环境中,使用了Gumbel-Softmax estimator.于是去搜了一下,发现该技巧应用甚广,如深度学习中的各种GAN.强化学习中的A2 ...
- 洛谷——P2083 找人
P2083 找人 题目背景 无 题目描述 小明要到他的同学家玩,可他只知道他住在某一单元,却不知住在哪个房间.那个单元有N层(1,2……N),每层有M(1,2……M)个房间. 小明会从第一层的某个房间 ...
- 1024 Palindromic Number (25)(25 point(s))
problem A number that will be the same when it is written forwards or backwards is known as a Palind ...
- luoguP4696 [CEOI2011]Matching KMP+树状数组
可以非常轻易的将题意转化为有多少子串满足排名相同 注意到$KMP$算法只会在当前字符串的某尾添加和删除字符 因此,如果添加和删除后面的字符对于前面的字符没有影响时,我们可以用$KMP$来模糊匹配 对于 ...
- ksyun主机挂载ksyun硬盘
1.查看虚拟磁盘的设备号是 /dev/vdc ls /dev/vd*2.格式化块设备,强烈推荐ext4文件系统: mkfs.ext4 /dev/vdc 3.准备挂载点,建立挂载目录.例: mkdir ...
- 【assembly】用汇编写的一个BMP图片读取器
;----------------------------- ;文件满足256色调的 ;----------------------------- Stack Segment ...
- 【10.6校内测试】【小模拟】【hash+线段树维护覆盖序列】
一开始看到题就果断跳到T2了!!没想到T2才是个大坑,浪费了两个小时QAQ!! 就是一道小模拟,它怎么说就怎么走就好了! 为什么要用这么多感叹号!!因为统计答案要边走边统计!!如果每个数据都扫一遍20 ...
- (转,学习记录)MD5加密算法中的加盐值(SALT)
我们知道,如果直接对密码进行散列,那么黑客可以对通过获得这个密码散列值,然后通过查散列值字典(例如MD5密码破解网站),得到某用户的密码. 加Salt可以一定程度上解决这一问题.所谓加Salt方法,就 ...
- 读书笔记_Effective_C++_条款三十四:区分接口继承和实现继承
这个条款书上内容说的篇幅比较多,但其实思想并不复杂.只要能理解三句话即可,第一句话是:纯虚函数只继承接口:第二句话是:虚函数既继承接口,也提供了一份默认实现:第三句话是:普通函数既继承接口,也强制继承 ...