我正在建立一个网页，其中有两个音乐播放器用于采样偏好。当光标离开玩家所在的分区时，我无法使音乐播放器停止播放。（我已经让第一个音乐播放器在播放时暂停第二个音乐播放器，反之亦然。）
我用过：
play: function() { //** added script from demo to pause other players **//
$(this).jPlayer("pauseOthers");
},
这是为了防止多个玩家同时使用.jplayer（“pauseOthers”）
我应该为jplayer编辑（head）[tag] javascript来监听.mouseleave以便暂停两个音乐播放器吗？ （我在HTML中有正常的jplayer布局）
编辑：
负责人：javascript
25 <script type="text/javascript">
26 //<![CDATA[
27 $(document).ready(function(){
28
29 $("#jquery_jplayer_1").jPlayer({
30 ready: function () {
31 $(this).jPlayer("setMedia", {
32 title: "sample 1",
33 mp3: "Music/sample1.mp3"
34 });
35 },
36 play: function() { //** added script from demo **//
37 $(this).jPlayer("pauseOthers");
38 },
// add .mouseleave code
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
},
39 swfPath: "swf/",
40 supplied: "mp3",
41 globalVolume: true,
42 smoothPlayBar: true,
43 keyEnabled: true
44 });
45
46 $("#jquery_jplayer_2").jPlayer({
47 ready: function () {
48 $(this).jPlayer("setMedia", {
49 title: "Sample 2",
50 mp3: "http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
51 });
52 },
53 play: function() { // To avoid multiple jPlayers playing together.
54 $(this).jplayer("pauseOthers");
55 },
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
},
56 swfPath: "swf/",
57 supplied: "mp3",
58 cssSelectorAncestor: "#jp_container_2",
59 globalVolume: true,
60 smoothPlayBar: true,
61 keyEnabled: true
62 });
63
64 });
65 //]]>
66 </script>
添加到两者：
// jquery_jplayer_1
pause: function() {
$("#containerjplayer").mouseleave("stop");
}
或
// jquery_jplayer_1
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
}
我在顶部脚本中添加了“play：function”，并在查看DOM和说明后显示了演示。不应该用.mouseleave工作添加“pause：function”吗？
如果没有，有不同的方法吗？
（我在HTML中有正常的jplayer布局）
编辑：添加了HTML文件
1<!DOCTYPE html>
2 <html><head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <title>Web testing</title>
5
6 <script type="text/javascript" src="js/jquery.min.js"></script> <!--- Goes to js files -->
7
8 <link rel="stylesheet" type="text/css" href="css/normalize.css">
9 <link rel="stylesheet" type="text/css" href="css/custom.css">
10
11
12 <link rel="stylesheet" type="text/css" href="css/bluemonday.css"> <!-- Works: Goes to CSS file and gets JPEG and gif -->
13
14
15
16 <script type="text/javascript" src="js/jquery.jplayer.min.js"></script> <!-- Jplay er Jquery -->
17
18
19 <style type="text/css">
20
21 </style>
22
23 <!-------------------- Script for Playing music and stopping multi ple music playback ------------>
24
25 <script type="text/javascript">
26 //<![CDATA[
27 $(document).ready(function(){
28
29 $("#jquery_jplayer_1").jPlayer({
30 ready: function () {
31 $(this).jPlayer("setMedia", {
32 title: "sample 1",
33 mp3: "Music/sample1.mp3"
34 });
35 },
36 play: function() { // To avoid multiple jPlayers playing together.
37 $(this).jPlayer("pauseOthers");
38 },
// add pause function and .mouseleave
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
},
39 swfPath: "swf/",
40 supplied: "mp3",
41 globalVolume: true,
42 smoothPlayBar: true,
43 keyEnabled: true
44 });
45
46 $("#jquery_jplayer_2").jPlayer({
47 ready: function () {
48 $(this).jPlayer("setMedia", {
49 title: "Sample 2",
50 mp3: "http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
51 });
52 },
53 play: function() { // To avoid multiple jPlayers playing together.
54 $(this).jPlayer("pauseOthers");
55 },
// add pause function and .mouseleave
pause: function() {
$("#containerjplayer").mouseleave("pauseOthers");
},
56 swfPath: "swf/",
57 supplied: "mp3",
58 cssSelectorAncestor: "#jp_container_2",
59 globalVolume: true,
60 smoothPlayBar: true,
61 keyEnabled: true
62 });
63
64 });
65 //]]>
66 </script>
67
68
69 <!----------------- END OF SCRIPT -------------------->
70
71 <style type="text/css"></style></head>
72 <body>
73 Which song do you like
74
75 <div id="containerjplayer">
76
77
78 <div id="blcoloredcontainer" href="javascript:;" class="jp-pause">
79 <!--------------- First Container ------------------ >
80
81
82 <div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;"><img st yle="width: 0px; height: 0px; display: none;" id="jp_poster_0"><audio title="Where Money Flows Like Water" src="http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" preload= "metadata" id="jp_audio_0"></audio></div> <!-- Made an edit to music -->
83
84 <div id="jp_container_1" class="jp-audio">
85 <div class="jp-type-single">
86 <div class="jp-gui jp-interface">
87 <ul class="jp-controls">
88
89 <!-- comment out any of the following <li>s to remove these buttons -->
90
91 <li><a href="javascript:;" class="jp-play" tabindex="1" style="display: none;">play</a></li>
92 <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: block;">pause</a></li>
93 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
94 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mut e</a></li>
95 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
96 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
97 </ul>
98
99 <!-- you can comment out any of the following <div>s too -->
100
101 <div class="jp-progress">
102 <div class="jp-seek-bar" style="width: 100%;">
103 <div class="jp-play-bar" style="width: 2.81491%;"></div>
104 </div>
105 </div>
106 <div class="jp-volume-bar">
107 <div class="jp-volume-bar-value" style="width: 80%;"></div>
108 </div>
109 <div class="jp-current-time">00:16</div>
110 <div class="jp-duration">09:45</div>
111 </div>
112 <div class="jp-details">
113 <ul>
114 <li><span class="jp-title">Sample 1</span></li>
115 </ul>
116 </div>
117 <div class="jp-no-solution" style="display: none;">
118 <span>Update Required</span>
119 To play the media you will need to either update your browser to a recent ve rsion or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash p lugin</a>.
120 </div>
121 </div>
122 </div>
123
124 </div>
125
126 <!--- ***blue color container script*** ------>
127 <script type="text/javascript">
128 $(document).ready(function(){
129 $("#blcoloredcontainer").mouseleave(function(event){
130 alert("Thanks");
131 });
132 });
133 </script>
134
135 <!--- blue color container script ------>
136 <div id="recoloredcontainer">
137
138
139 <!----------------- Break to second container ---------------->
140
141 <div id="jquery_jplayer_2" class="jp-jplayer" style="width: 0px; height: 0px;"><img st yle="width: 0px; height: 0px; display: none;" id="jp_poster_0"><audio title="Battle" src ="http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" preload="metadata" id="jp_audi o_0"></audio></div> <!-- Made an edit to music -->
142
143 <div id="jp_container_2" class="jp-audio">
144 <div class="jp-type-single">
145 <div class="jp-gui jp-interface">
146 <ul class="jp-controls">
147
148 <!---- comment out any of the following <li>s to remove these buttons -- >
149
150 <li><a href="javascript:;" class="jp-play" tabindex="1" style="display: none;">play</a></li>
151 <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: block;">pause</a></li>
152 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
153 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mut e</a></li>
154 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
155 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
156 </ul>
157
158 <!-- you can comment out any of the following <div>s too -->
159
160 <div class="jp-progress">
161 <div class="jp-seek-bar" style="width: 100%;">
162 <div class="jp-play-bar" style="width: 2.81491%;"></div>
163 </div>
164 </div>
165 <div class="jp-volume-bar">
166 <div class="jp-volume-bar-value" style="width: 80%;"></div>
167 </div>
168 <div class="jp-current-time">00:16</div>
169 <div class="jp-duration">09:45</div>
170 </div>
171 <div class="jp-details">
172 <ul>
173 <li><span class="jp-title">Sample 2</span></li>
174 </ul>
175 </div>
176 <div class="jp-no-solution" style="display: none;">
177 <span>Update Required</span>
178 To play the media you will need to either update your browser to a recent ve rsion or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash p lugin</a>.
179 </div>
180 </div>
181 </div>
182
183
184 </div>
185
186
187 </div>
188 </body></html>
答案 0 :(得分：0)
您尚未发布stop的内容。
无论如何，mouseleave都有一个功能：
$('#container').mouseleave(function() {
alert();
}
或
$('#container').on('mouseleave', function() {
alert();
}
如果DOM可以更改，请使用：
$(document).on('mouseleave', '#container', function() {
alert();
}
我无法在您的HTML中找到#container。如果有多个容器，您应该将id更改为类。
答案 1 :(得分：0)
行。所以我通过更多的研究和另一个stackoverflow问题找到了答案。我需要做的是用.mouseleave暂停所有音乐播放器：
<script type="text/javascript">
$(document).ready(function(){
$("#blcoloredcontainer").mouseleave(function(event){
$.jPlayer.pause();
});
$("#recoloredcontainer").mouseleave(function(event){
$.jPlayer.pause(); // this will turn off every music player
});
});
</script>
这会阻止蓝色容器和红色容器内的音乐。