jplayer插件的使用方法

 实例: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)。

你可能感兴趣的:(jplayer插件的使用方法)