基于jQuery的视频和音频播放器jPlayer
jPlayer见网络上资料很少,官方英文资料太坑爹TAT,于是就写一个手记给大家参考下。据我观察,jPlayer的原理主要是用到HTML5,在不支持HTML5的浏览器上使用SWF。做到全兼容,这一点很不错。官方还说明,服务器对于MP3文件不要做GZIP压缩,只是徒增CPU而已。并且在Flash播放GZIP的MP3时会出错。
jPlayer简介:
想在网页上播放背景音乐,不想用html标签的方式,因为那样只有音乐全部下载完以后才能播放,还容易出现跨浏览器兼容性的问题,于是选了一款基于jQuery的播放器jPlayer来做。
jPlayer可以做什么:
控制并播放你网站上的媒体文件
创建播放器,利用html+css定制化播放器样式
将音频和视频加入到你的jQuery项目中
支持更多的使用HTML5规范的设备
支持使用Flash Fallback的旧浏览器
使用Javascript API控制你网站上的媒体文件jPlayer支持的媒体格式:HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)
jPlayer需要两个文件上传到你的服务器:
Jplayer.swf
jquery.jplayer.min.js
jPlayer构造在jQuery选择器上。采用 $(ID).jPlayer(Object: options) 的形式执行动作。在某些场合,jPlayer也可以构造在body上,指你不用播放视频的时候。
注意:swfPath,它定义jPlayer SWF文件的路径。记得把SWF文件上传到你的服务器!你也可以使用类似jPlayer({solution:"flash, html")的语句规定用什么方式播放媒体优先。
初始化后更改设置
初始化之后 使用类似 jPlayer("option",{key:value})的形式改变设置。
实现一个自动播放音乐的网页
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
});
},
swfPath: "js",
supplied: "m4a, oga",
}).jPlayer("play");
});
解释一下上面的代码:
第一行“$(document).ready(function(){”大家都无比亲切吧,文档载入事件。
第二行“$("#jquery_jplayer_1").jPlayer({”选择的是一个DIV,用于承载HTML5元素或是Flash,大家在文档里写一个空的DIV即可。
第三行“ready: function (event) {”,ready是一个键,function是一个值,灰常熟悉的东西。
第四行“$(this).jPlayer("setMedia", {”this指的是“$("#jquery_jplayer_1")”,意为:“$("#jquery_jplayer_1").jPlayer("setMedia", {”很熟悉。setMedia是一个option,根据第二步说的。
第九行“swfPath: "js",”,这个定义了swf播放器所在的相对路径,如果你不打算兼容不支持HTML5的网页,可以不写:)
第十行“supplied: "m4a, oga",”所支持的格式。
第十一行“jPlayer("play");”意为:$("#jquery_jplayer_1").jPlayer("play");,播放媒体,实现自动播放。
jPlayer常用的方法:
//播放
$("#jpId").jPlayer("play");
//暂停
$("#jpId").jPlayer("pause");
//停止
$("#jpId").jPlayer("stop");
//设置进度相关
//1.按歌曲时长百分比
$("#jpId").jPlayer("playHead", 0);// 从 0% 处开始播放
$("#jpId").jPlayer("playHead", 10);// 从 10% 处开始播放
$("#jpId").jPlayer("playHead", 100);// 从 100% 处开始播放
//2.按播放毫秒数
$("#jpId").jPlayer("playHeadTime", 0);// 从 0毫秒 处开始播放
$("#jpId").jPlayer("playHeadTime", 10000); // 从 10000毫秒(10秒) 处开始播放
//设定音量
$("#jpId").jPlayer("volume", 0.25); //设为最大音量的 25%
//绑定事件
//播放结束事件
$("#jpId").jPlayer("onSoundComplete", function() {
//alert('播放结束了');
this.element.jPlayer("play"); // 循环播放
});
//播放进行事件
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
var s = '缓冲百分比:'+lp +'% ,';
s += '已播放占已缓冲的百分比:'+ppr +'% ,';
s += '已播放占总时长的百分比:'+ppa +'%';
s += '已播放时间:'+pt+ '毫秒 ,';
s += '总时间:'+tt+ '毫秒';
$("#play_info").text(s);
});
jPlayer官网:http://www.jplayer.org
jPlayer下载:http://www.jplayer.org/download/
jPlayer官网英文版在线手册:http://www.jplayer.org/latest/developer-guide/
jPlayer在线演示:http://www.jplayer.org/latest/demos/
最新文章
- Sie sind das Essen und wir sind die Jaeger!
- 常用的PHP数据库操作方法(MYSQL版)
- 学习iOS笔记第一天的C语言学习记录
- Xamarin.Android之转换,呼叫,查看历史纪录
- jsp或Action获取请求参数中文乱码
- Hibernate从入门到精通(四)基本映射
- HDU 2602 Find a way BFS搜索
- 【MyBatis学习笔记】
- JS中的for和for in循环
- 使用资源监控工具 glances
- HTTP协议 HttpWebRequest和 Socket的一点总结
- GCD教程(四):完结
- Bottle源码阅读笔记(一):WSGI
- VTK显示.vtk格式文件
- (转载)SQL Server2008附加数据库之后显示为只读时解决方法
- 前端面试题整理—Webpack篇
- 一个网站SQL注入的案例
- Error occurred during initialization of VM Could not reserve enough space for 2097152KB object heap
- Python小爬虫——抓取豆瓣电影Top250数据
- 编写装饰器实现python请求错误重试功能
热门文章
- 部署K2 Blackpearl流程时出错(与基础事务管理器的通信失败或Communication with the underlying transaction manager has failed.
- Informatica9.6.1在Linux Red Hat 5.8上安装遇到的有关问题整理_3
- myeclipse9 struts2配置
- 关于div居中
- api-ms-win-crt-runtime-l1-1-0.dll丢失问题
- Oracle自定义数据类型 1
- Yii系列教程(二):功能简介
- Dev gridControl z
- Drupal如何处理系统变量?
- LoadRunner参数数组