`

jplayer插件的使用方法

jplayer jquery js 音乐 插件 
阅读更多

 实例：www.52tzj.com

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as an audio player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/css/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	/*
	$("#jquery_jplayer_1").jPlayer({
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				mp3:"/qq.mp3"
				//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: "mp3",
		wmode: "window"
	});
	
	$("#jquery_jplayer_2").jPlayer({
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				mp3:"/qq.mp3"
				//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: "mp3",
		wmode: "window"
	});
	*/
	
	
	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				mp3:"/qq.mp3"
			});
		},
		play: function() { // To avoid both jPlayers playing together.
			$(this).jPlayer("pauseOthers");
		},
		repeat: function(event) { // Override the default jPlayer repeat event handler
			if(event.jPlayer.options.loop) {
				$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
				$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
					$(this).jPlayer("play");
				});
			} else {
				$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
				$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
					$("#jquery_jplayer_2").jPlayer("play", 0);
				});
			}
		},
		swfPath: "/js",
		supplied: "mp3",
		wmode: "window"
	});
	$("#jquery_jplayer_2").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				mp3:"/qq.mp3"
			});
		},
		play: function() { // To avoid both jPlayers playing together.
			$(this).jPlayer("pauseOthers");
		},
		swfPath: "/js",
		supplied: "mp3",
		cssSelectorAncestor: "#jp_container_2",
		wmode: "window"
	});
	$(".jp-current-time").unbind("click");
});

</script>
</head>
<body>

		<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<div id="jquery_jplayer_2" class="jp-jplayer"></div>

		<div id="jp_container_1" class="jp-audio">
		    
		
			<div class="jp-type-single">
			
				<div class="jp-gui jp-interface">
				<div class="left leftbg"></div>
				<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
							<div class="jp-time-holder">
						<div class="jp-songname">花太香</div>
						<div class="jp-current-time"></div>
						</div>
						</div>
						
					</div>
			  		

					<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>
					</ul>



				</div>

			</div>
		</div>
		
		<div id="jp_container_2" class="jp-audio">
		    
		
			<div class="jp-type-single">
			
				<div class="jp-gui jp-interface">
				<div class="left leftbg"></div>
				<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
							<div class="jp-time-holder">
						<div class="jp-songname">花太香</div>
						<div class="jp-current-time"></div>
						</div>
						</div>
						
					</div>
			  		

					<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>
					</ul>



				</div>

			</div>
		</div>
		
		
		
</body>

</html>

以上为两个插件在同一个页面的案例。

jplayer是基于jquery的一个音乐播放插件，其功能很强大，具体可以参考官网。

在此个人觉得要特别注意几点：

1.swfPath: "/js"如果这个不准确会倒置浏览器的兼容问题

2.$(".jp-current-time").unbind("click");把时间上的事件取消掉，让我可以触发快进

其他JS，CCS源码太大，不贴出，要的可以M我(www.52tzj.com)。

分享到：
| jquery.filedrop插件的使用，拖动图片上传
评论
2 楼 waajiao 2013-03-11  
waajiao 写道
麻烦您把全套的这个js和css源码给我吧。我的邮箱：waajiao@163.com

我用这个插件遇到了一个问题。比如一个留言板允许有语音留言，PC上用这个插件播放语音。一个页面有好多语音留言，要怎么处理？只有开始和暂停功能。

我已经解决了，是我自己写错了，把id写成了内容。很简单又很愚蠢的错误……谢谢你的这篇文章。
1 楼 waajiao 2013-03-08  
麻烦您把全套的这个js和css源码给我吧。我的邮箱：waajiao@163.com

我用这个插件遇到了一个问题。比如一个留言板允许有语音留言，PC上用这个插件播放语音。一个页面有好多语音留言，要怎么处理？只有开始和暂停功能。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    连接ASP的JPLAYER插件

    连接ASP的JPLAYER插件 找了好久才找到的

    jplayer插件的运用

    这是一个jplay插件的使用，要想在ie8和ie7下都好用，需在localhost的环境下

    jplayer视频播放插件

    jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件) jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页. jPlayer的丰富API可以让你创建一个个性化多媒体...

    jquery插件Jplayer使用方法简析

    初识jplayer插件是因为它的兼容性是最好的，可以兼容到IE6，官网上对它兼容性有很详细的说明 这个是我选择使用它的首要原因。 现在从需求上来了解它的使用方法吧。第一个需求：MP3格式的音频在网页播放，样式如下：...

    jplayer插件

    jquery得一款免费多媒体插件。下载的demo在ie/firefox/safari/Google Chrome下都可以运行，需要安装quickTime。不支持html5的浏览器，请安装flashplayer。官方网站 www.jplayer.org。

    jPlayer插件使用踩过的坑

    最近需要做一个可以在系统中播放录音的需求，使用了兼容ie8的jPlayer插件。 这个插件已经有很长的历史了，最新一次的版本是2015年的。。。。。 没办法还得硬着头皮上。。。 首先我们需要知道，现在大部分使用的谷歌...

    jQuery音乐播放插件jPlayer

    插件描述：简洁的音乐插件jPlayer。参考实例：http://www.jq22.com/jquery-info4640

    jplayer歌词同步的jquery插件

    该插件是一个jquery的编写的跟jplayer实现歌词同步的插件，最终效果在这个连接去看http://blog.csdn.net/wk313753744/article/details/38758317

    jQuery支持电脑手机端网页音乐播放器Jplayer插件.zip

    有兴趣刚需的可以自己下载，非常使用的jquery代码，可以完美运行，有能力的还可以二次修改！

    网页视频播放插件jplayer

    视频资源播放的jquery插件，可以支持大多数现有的视频格式。集成容易，可以查看demo。

    jPlayer Demo案例

    jPlayer影响播放插件，纯js

    jQuery.jPlayer.2.4.0

    作为jQuery插件的一员，使用jPlayer可以在你的网页上轻松加入跨平台的音乐和视频。 支持的平台与浏览器 Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9 OSX: Safari, Firefox, Chrome, Opera iOS: ...

    jquery音乐播放器插件jplayer.zip

    jquery音乐播放器插件jplayer.zip

    jPlayer2.1.0实例包

    jplayer 是国外利用jquery开发的一套基于html5 video的插件，利用jplayer可以在网页中播放html5 video视频并且实现详细的控制功能。

    Lightbox-Jplayer.rar

    一个JavaScript的图片展示插件Lightbox-Jplayer.rar

    jquery音乐播放器插件jplayer源码.zip

    jquery音乐播放器插件jplayer源码.zip

Magicbox
Global site tag (gtag.js) - Google Analytics