[jPlayer]一分钟部署jPlayer
------------------------------------------------------------------------------------------------------
「jPlayer作为音频播放器」
你可以简单的定制样子并使它适合你页面的颜色和样式。
Demo中如果可以使用HTML，将使用HTML解决方案，否则Flash备选方案将被使用。
注意：{wmode:"window"}选项是为了确保在Firefox3.6中使用Flash方案时能播放。然而，OGA格式将被用在HTML解决方案中。
参考资料：
所有的Demo均在：http://jplayer.org/latest/demos/
jPlayer提供的支持和FAQ：http://jplayer.org/support/
开发者指南：http://jplayer.org/latest/developer-guide/
快速开始：http://jplayer.org/latest/quick-start-guide/
<!-- 头部 @黑眼诗人 <www.farwish.com> -->
<head>
<link style="text/css" rel="stylesheet" href=""> <!-- 引入你自定义的CSS皮肤 -->
<script src="statics/home/js/jquery.min.js"></script> <!-- jPlayer基于jQuery，所以必须先插件之前引入 -->
<script src="statics/home/js/player/jquery.jplayer.min.js"></script> <!-- 引入jPlayer插件 -->
<script>
$(document).ready(function(){ //jQuery方法：文档载入后执行
$("#jquery_jplayer_1").jPlayer({ //id为jquery_jplayer_1的div调用.jPlayer("options",{key:value})进行设置
ready: function () { //ready为键，对应function为值
$(this).jPlayer("setMedia", { //$(this)即为$("#jquery_jplayer_1"),setMedia即为选项，键为mp3(格式)，值为地址
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
mp3: "./test.mp3"
});
},
swfPath: "statics/home/js", //jPlayer.swf所在目录的路径
supplied: "mp3, m4a, oga" //支持的音频格式
}).jPlayer("play"); //.jPlayer("play")实现自动播放,可不加
});
</script>
</head>
<!-- 播放器主体(样式可在头部CSS中自定义) -->
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>My jPlayer</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</body>
更详细的播放器参数可参考文档：http://jplayer.org/latest/developer-guide/
在页面中引入上述代码，head中的路径正确就能播放了，有兴趣的童鞋可以尝试，也欢迎与我交流。
[jPlayer]一分钟部署jPlayer的更多相关文章
- 三分钟部署Laxcus大数据管理系统
Laxcus是Laxcus大数据实验室历时五年,全体系自主设计研发的国内首套大数据管理系统.能够支撑百万台级计算机节点,提供EB量级存储和计算能力,兼容SQL和关系数据库.最新的2.x版本已经实现对当 ...
- 阿里云SaaS生态战略发布，用宜搭5分钟部署OCR文字识别
7月26日,在阿里云合作伙伴峰会上,阿里云发布SaaS生态战略:通过SaaS加速器为合作伙伴提供应用开发.集成.上云.售卖的全链路解决方案,提升开发效率和集成效率,缩短商业化周期. 作为阿里SaaS加 ...
- CentOS 30分钟部署 .net core 在线客服系统
前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程.期间有一些朋友希望能够给出 Linux 环境的安装部署指导,本文基于 CentOS 8.3 来安装部署.在本文中我 ...
- Docker 版 3分钟部署 .net core 开源在线客服系统，他来了
我在博客园发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 前些天又应朋友的要求,发了一篇 CentOS 版本的安装部署教程:https://www.cnblogs.com ...
- 十分钟部署Anemometer作为Mysql慢查询可视化系统
前言 采用Anemometer将Mysql慢查询日志可视化,可以更便捷的查询慢查询日志,并根据时间戳进行历史查询.如下是单机版Anemometer部署的演示,实际应用中,为安全起见,建议把anemom ...
- 5分钟部署一个Hello World Servlet到CloudFoundry
首先从我的Github下载我写好的hello world Servlet到本地. 安装Maven,然后执行命令行mvn clean install,确保build成功,在项目根目录的target文件夹 ...
- Pivotal：15分钟部署你的应用
“ 本篇文章介绍的是PaaS平台Pivotal Cloud Foundry(以下简称PCF)的初步使用,相比于传统的IaaS平台(比如阿里云),PCF可实现快速迭代开发与部署,让您专注于业务开发.” ...
- Kubernetes笔记（一）：十分钟部署一套K8s环境
Kubernetes是Goole开源的一个容器编排引擎,它支持自动化部署.大规模可伸缩.应用容器化管理 -- 百度百科. 接触K8s也有半年多了,也基于阿里云平台搭建了包含多级服务.目前运行较为稳定的 ...
- 5分钟部署ELK+filebeat5.1.1
标题有点噱头,不过网络环境好的情况下也差不多了^_^ 1. 首先保证安装了jdk. elasticsearch, logstash, kibana,filebeat都可以通过yum安装,这里前 ...
随机推荐
- Shiro 权限注解
Shiro 权限注解: Shiro 提供了相应的注解用于权限控制,如果使用这些注解就需要使用AOP 的功能来进行 判断,如Spring AOP:Shiro 提供了Spring AOP 集成用于 ...
- jdbc连接池&改进dbUtil成C3P0Util
一.jdbc连接池 1.连接池的存在理由 前面介绍的dbUtils工具类虽然实现了一个对jdbc的简单封装.但它依旧采取从驱动管理获取连接 (DriverManager.getConnection ...
- Delphi2010/XE2下隐藏程序系统任务栏的图标
Delphi7代码: SetWindowLong(Application.Handle,GWL_EXSTYLE,WS_EX_TOOLWINDOW); 以上的代码在Delphi7中可以用,但是在Delp ...
- Delphi2010如何获取程序内部自身版本号？
用原来的GetFileVersionInfo只能获取Delpi7的程序版本号,用在Delphi2010中就不管用了 //------ 获取文件版本号function F_GetFileVersion( ...
- day6--面向对象初识
一面向过程与面向对象 面向过程: 流水线式的思维,顺着流程进行下去,类似于代码的堆叠,重视步骤 优点:不需要考虑太多东西,想到一个功能就写一个功能,堆叠代码 缺点:过程往往是先后执行的,要想变换功能或 ...
- uva-321-暴力枚举-隐式图搜索
题意:给你n个房间,有许多灯的控制开关,i房间灯的开关在j房间,未开灯的房间不能进,i房间和j房间之间如果没有门,也不能从i进入到j,开始房间是1,并且灯是开着的,问你是否能够走到最后一个房间n,并且 ...
- Xshell 本地上传、远程下载文件
1.Xshell登录工具在创建会话的时候,点击最下面的ZMODEM,可以填写下载的路径和加载的路径:2个路径可以一样也可以不一样: 在下载的时候可以下载到相应的路径去.(我设置的是下载前始终询问) 2 ...
- js提高篇
1定义一个方法 function aa(){alert(this)} 对于浏览器 这只是一个方法,那么this是什么的,this理所当然是document对象了..也就是说 打页面定义的方法 都是do ...
- 简单ATM机功能实现及感想
感想: 在那一天下午气喘吁吁的上了六楼 在建民的课上 都要带电脑 第一次上这样的课,每一次都是个段子 ,这一次考试是学前考试,什么也不知道 ,但是通过百度, 发现JAVA有很多还都和C语言相似的地方 ...
- 编写优秀Bug报告的艺术及案例分析
编写优秀Bug报告的艺术及案例分析 ---Rex Black原著<Fine art of writing a good bug report > ---Kiki翻译于2005/5/28 前 ...