jplayer 播放器

最新推荐文章于 2024-10-02 09:27:42 发布

笑看人生-

最新推荐文章于 2024-10-02 09:27:42 发布

阅读量3.3k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qishuo_java/article/details/48157683

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是在分析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>

2、audio

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head></head>
<body>
<audio controls="controls" autoplay="false">
<source src="./music/tip.mp3" type="audio/mpeg">
</audio>
</body>
</html>

在本地测试没问题，放到tomcat不能播放，是因为不支持MP3和wav等格式，只要在web.xml配置即可支持

<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.mp3</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.wav</url-pattern>
</servlet-mapping>
<session-config>

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/