jplayer 播放器

原文：https://blog.csdn.net/qishuo_java/article/details/48157683

这是在分析12306js得出的，呵呵。。。。。。。。。

直接上代码：1、jplayer使用

<!DOCTYPE html>
<html>
<head>
<title>jPlayer Development Tester</title>
<script type="text/javascript" src="../../lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
</head>
<body>
<div id="jquery_jplayer_2" class="jp-jplayer"></div>
<div id="jp_container_2" class="jp-audio" role="application" aria-label="media player">

<button id="stop">停止</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
// The static player at the bottom
$("#jquery_jplayer_2").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
// mp3:"./tip.mp3"
// mp3:"./message.wav",
mp3:"./newmessage.wav",
}).jPlayer("play")
},
//swfPath: "../../dist/jplayer",
supplied: "mp3,wav",
cssSelectorAncestor: "#jp_container_2",
useStateClassSkin: true,
autoBlur: false,
autoPlay:true
});

$("#stop").click(function(){
$("#jquery_jplayer_2").jPlayer("stop");
});
});

</script>
</body>
</html>

$(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/

jplayer 播放器相关推荐

JPlayer播放器插件教程，JPlayer项目实战
JPlayer 播放器:基于HTML5/Flash的音频.视频播放器. 项目预览:播放器插件预览 jPlayer中文官方文档:官网功能强大,操作简便,支持换肤功能. 引入JPlayer文件以及样式: ...
jplayer 播放器的使用
jplayer 是一个纯 js 的播放器框架,主要是用于在 web 页面中嵌入 js 播放器播放器的样式大概如下: jplayer 的使用方法也非常简单使用方法: 1 在 html 的<he ...
Jplayer播放器广告插件
http://pan.baidu.com/s/1jGurIke 转载于:https://www.cnblogs.com/doujinya/p/3862828.html
用Jplayer做的一个带动画的播放器
一.一开始在看Jplayer的文档说明的时候,我内心是崩溃的,第一个demo很少,而且很多东西没交代清楚,第二个是代码整理的也不算很完整,毕竟是翻译别人外国人的东西,所以没自己撰写的完整,有些还只是停 ...
基于jQuery的网页影音播放器jPlayer的基本使用教程
原文地址:http://www.jb51.net/article/80655.htm jPlayer简介: 想在网页上播放背景音乐,不想用html标签的方式,因为那样只有音乐全部下载完以后才能播放,还 ...
【JQ】-jPlayer视频、音乐播放器使用详解！
下载官网:http://www.jplayer.org/ 当前版本:2.3.0 功能:视频播放(可全屏).音乐播放全部原教程,说明并不详细,要结合查看其网页源代码来学习:http://www.jpl ...
JQuery 开源播放器 JPlayer
最近在一网盘项目里烦恼着播放器的问题,经过千辛万苦终于找到一个合适的了,一个Open Source的JS播放器,可以适应多浏览器,太兴奋了,急于与大家分享一下: 地址:http://www.happy ...
播放器JPlayer的使用及遇到的问题
原文地址:http://blog.csdn.net/z69183787/article/details/8178656?_t_t_t=0.5149982699228508 jPlayer是一个用于控制 ...
一款简洁的 jplayer 音乐播放器完整版
一款简洁 jplayer 音乐播放器,做音乐站很漂亮,直接套用就好了. 效果图: 部分源代码: <div id="lei_jplayer"></div> & ...

jplayer 播放器

jplayer 播放器相关推荐

最新文章

热门文章