如果选择了一名玩家,如何停止播放所有音频播放器?
问题描述:
我这里有一个演示:demonstration如果选择了一名玩家,如何停止播放所有音频播放器?
在演示中,我有2个问题,这些问题它包含jplayer音频播放器,其中它起着属于每个问题的音频。
因此在演示题1中有2段音频,因此为什么有2个音频播放器用于问题1,每个播放器有一个音频文件。问题2中有一个音频播放器,因为它只包含一个音频文件。现在,下面的代码显示了如果一个问题没有音频文件,那么显示一个空白的其他显示每个音频文件的音频播放器。
唯一的问题是,如果你点击一个音频播放器,那么所有的音频播放器正在播放,播放他们的文件。我想要的只是,如果用户使用音频播放器,则只有属于该音频播放器的音频文件才能播放,就是这样。对于其他控件而言,如果用户在音频播放器中使用控件,则该控件只能控制该音频播放器。
但是为了解决这个问题我需要做些什么?
下面是代码:
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure audio
$aud_result = '';
if(empty($arrAudioFile[$key])){
$aud_result = ' ';
}else{
$j = 0;
foreach ($arrAudioFile[$key] as $a) {
$info = pathinfo('AudioFiles/'.$a);
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
<?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
});
},
solution:"flash,html",
swfPath: "jquery",
supplied: "<?php echo $info['extension'];?>"
});
});
</script>
<div id="jquery_jplayer_1-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<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>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
</div>
</div>
<?php $j++;
}
}
//end:procedure audio
?>
</div>
<?php
}
?>
UPDATE:
$("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
<?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
});
},
$(this).bind($.jPlayer.event.play, function() { //ERROR HERE
$(this).jPlayer("pauseOthers");
},
solution:"flash,html",
swfPath: "jquery",
supplied: "<?php echo $info['extension'];?>"
});
以上代码给我这个错误:缺少:后财产清单
答
我们就遇到了这个在最近的一个项目。看到这个jPlayer演示:
http://www.jplayer.org/latest/demo-03/
根据这一页,“附加$ .jPlayer.event.play事件处理程序已经被用来避免jPlayers一起玩。”
添加播放功能在jPlayer属性,像这样:
$("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
<?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
solution:"flash,html",
swfPath: "jquery",
supplied: "<?php echo $info['extension'];?>"
});
所以我需要包括'$ .jPlayer.event.play'到代码?如果是的话,我想把它放在哪里? – user2048994 2013-02-09 00:34:01
只需将其添加为jPlayer属性之一即可。我编辑了我的答案,以反映如何做到这一点。 (我刚进入演示页面,查看源代码并找到了播放事件行,但我没有测试过) – lwitzel 2013-02-09 00:50:46
我测试了你的代码,但它仍然在做同样的事情 – user2048994 2013-02-09 01:00:42