`

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上用这个插件播放语音。一个页面有好多语音留言，要怎么处理？只有开始和暂停功能。
发表评论

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

相关推荐

    jplayer插件的运用

    **jPlayer插件详解及其在IE8和IE7下的应用** ...以上就是关于jPlayer插件的基本介绍及其在IE8和IE7环境下的使用方法。通过学习和实践，开发者可以利用jPlayer轻松构建高性能、兼容性强的多媒体播放器。

    连接ASP的JPLAYER插件

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

    jquery插件Jplayer使用方法简析

    例如，你可以监听 `play` 和 `pause` 事件来添加自定义功能，或者使用 `jPlayer("play")` 和 `jPlayer("pause")` 方法来控制播放和暂停。 总的来说，Jplayer 是一个功能强大且灵活的 jQuery 音频/视频播放器插件，...

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

    **jQuery支持电脑手机端网页音乐播放器Jplayer插件** jQuery是一个广泛应用于Web开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本项目中，我们关注的是jQuery的一个插件——Jplayer。...

    jplayer视频播放插件

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

    jplayer插件

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

    jQuery音乐播放插件jPlayer

    **jQuery音乐播放插件jPlayer** jPlayer是一款基于JavaScript和jQuery的开源音乐播放器插件，它为网页设计师和开发者提供了构建优雅、功能丰富的音乐播放界面的能力。jPlayer以其简洁的API、高度自定义和跨浏览器...

    网页视频播放插件jplayer

    这些示例涵盖了基本功能到高级特性的各种应用场景，开发者可以通过查看和学习这些示例，快速掌握jPlayer的使用方法。 **4. 兼容性与优化** jPlayer致力于保持与最新浏览器的兼容性，包括Chrome、Firefox、Safari、...

    jPlayer-2.9.2.zip_-baijiahao_dist/jplayer_jplayer_jplayer swf_j

    3. **jQuery库**：jPlayer是基于jQuery的，所以熟悉jQuery的选择器、方法和插件机制是必要的。 4. **媒体文件格式**：了解不同媒体格式的优缺点，以及浏览器对不同格式的支持情况，可以帮助优化用户体验。 5. **...

    jPlayer插件使用踩过的坑

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

    JPlayer-WEB.rar_jplayer_jplayer使用实例

    5. **插件扩展**：JPlayer社区开发了许多插件，增强了播放器的功能，如广告插入、播放列表、时间显示、音量控制等。 **JPlayer使用实例** 在实例中，我们首先需要在HTML页面中引入JPlayer的JavaScript库和对应的...

    jPlayer-2.5.4完整版

    ### 三、使用方法 1. **安装**：首先需要在项目中引入jQuery库和jPlayer的核心文件，通常包括`jquery.jplayer.min.js`和相应的皮肤CSS文件。 2. **初始化**：在HTML中设置一个`div`作为播放器容器，并通过jQuery选择...

    jplayer歌词同步的jquery插件

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

    jPlayer2.1.0实例包

    其中可能包括了基础的视频播放、自定义皮肤、播放列表等功能的示例代码，通过查看和运行这些例子，开发者可以直观地了解 jPlayer 的工作原理和使用方法。 **五、学习与应用** 对于初学者，建议首先了解 HTML5 的 `...

    jPlayer-2.9.1播放器demo

    本篇将深入探讨jPlayer的核心特性、使用方法以及如何根据需求进行配置。 ### 1. jPlayer的功能特性 - **跨平台兼容性**：jPlayer支持HTML5和Flash两种技术，确保在多种浏览器和设备上都能正常工作，包括桌面端和...

    jPlayer Demo案例

    在本篇中，我们将深入探讨jPlayer的核心特性和使用方法。 ### 1. jPlayer 的核心特性 - **跨浏览器支持**：jPlayer 支持多种浏览器，包括最新的Chrome、Firefox、Safari、Edge以及Internet Explorer。这使得开发者...

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

    jPlayer提供了丰富的事件和方法供开发者使用。例如，监听播放状态变化： ```javascript $("#jpId").on($.jPlayer.event.play, function() { console.log("正在播放"); }); ``` 方法如`play()`, `pause()`, `stop()...

    jquery音乐播放器插件jplayer.zip

    下面将详细介绍jPlayer的核心特性、使用方法以及与相关技术的结合。 **核心特性** 1. **跨平台兼容性**：jPlayer支持多种浏览器，包括Internet Explorer、Firefox、Chrome、Safari和Opera等，同时兼容桌面和移动...

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