![](/img/trans.png)
[英]How to play at time only one jwplayer in page while other players stop which are playing
[英]how to stop all audio players playing if one player is selected?
我在這里有一個演示: 演示
在演示中,我有2個問題,在這些問題中,它包含jplayer音頻播放器,在其中播放屬於每個問題的音頻。
因此在演示中,問題1有2個音頻,因此為什么問題1有2個音頻播放器,每個播放器一個音頻文件。 在問題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
}
?>
更新:
$("#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'];?>"
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.