jplayer插件的使用方法

最新推荐文章于 2020-10-28 19:13:15 发布

robertXin

最新推荐文章于 2020-10-28 19:13:15 发布

阅读量697

点赞数

分类专栏： js/jQuery 文章标签： jplayer jquery js 音乐插件

本文链接：https://blog.csdn.net/home198979/article/details/84199764

版权

js/jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

robertXin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jplayer插件的使用方法

实例：www.52tzj.com&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=utf-8 /&gt;&lt;!-- Website Design By: www.happyworm.com --&gt;&lt;title&gt;Demo : jPlayer as an audio pla...
复制链接

扫一扫

专栏目录