jQuery多媒体播放器插件jQuery Media Plugin使用方法
2013-11-27 15:03
716 查看
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">
具体使用方法
html标记代码
初始化脚本:
选项
可以通过脚本对象或者jQuery Metadata Plugin来配置参数。
全局默认值:
我们也可以在执行初始化脚本的时候传入一些option参数进去,如下代码:
再如代码:
'src'选项
src选项指定了媒体文件的地址。它没有全局的默认值。如果未显示指定src选项的值,jQuery Media Plugin将使用href或者src属性的值来代替。
播放器和格式
jQuery Media Plugin默认为播放器和格式如下表所示:
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方法实现,如
可用的播放器有:uicktime, flash, realplayer, winmedia, silverlight和iframe,确保播放器能够播放关联到它的文件格式。
在线demo
Video/Flash Demo
Audio Demo
sIFR Demo
Silverlight Demo
Misc Demo (pdf, html)
下载
直接下载jquery.media.js文件,或者在Github上下载历史版本
参考文章:jQuery Media Plugin:更方便地展示你的多媒体
<div class="media">
具体使用方法
html标记代码
初始化脚本:
选项
可以通过脚本对象或者jQuery Metadata Plugin来配置参数。
全局默认值:
我们也可以在执行初始化脚本的时候传入一些option参数进去,如下代码:
再如代码:
'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方法实现,如
可用的播放器有:uicktime, flash, realplayer, winmedia, silverlight和iframe,确保播放器能够播放关联到它的文件格式。
在线demo
Video/Flash Demo
Audio Demo
sIFR Demo
Silverlight Demo
Misc Demo (pdf, html)
下载
直接下载jquery.media.js文件,或者在Github上下载历史版本
参考文章:jQuery Media Plugin:更方便地展示你的多媒体
相关文章推荐
- jQuery多媒体播放器插件jQuery Media Plugin使用方法
- jQuery多媒体插件jQuery Media Plugin使用详解
- (原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得
- jQuery多媒体插件jQuery Media Plugin使用详解
- Validation-jQuery表单验证插件使用方法
- jquery插件jTimer(jquery定时器)使用方法
- jquery滚动条插件slimScroll的使用方法总结
- Chosen 基于jquery的选择框插件使用方法
- jQuery灯箱插件lightBox使用方法
- jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- seajs 引用 jquery 和 使用插件解决方法
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- Jquery表单验证插件formValidator使用方法
- jquery.validate.js插件的使用方法
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- jQuery jcrop插件截图使用方法
- 使用jquery插件报错:TypeError:$.browser is undefined的解决方法
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- jQuery插件Tmpl的简单使用方法