Мне нужно использовать несколько экземпляров потока с jPlayer, используя этот плеер. По умолчанию это не так, поэтому я попытался внести несколько изменений, но все равно не могу заставить его работать. Первый игрок работает, но он воспроизводит все другие потоки вместе, а второй игрок вообще не может быть запущен. Любая идея? Мой код выглядит следующим образом:
СЦЕНАРИЙ
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
var stream = {
title: "ABC Jazz",
mp3: "http://listen.radionomy.com/abc-jazz"
},
ready = false;
jQuery("#jquery_jplayer_11").jPlayer({
ready: function (event) {
ready = true;
jQuery(this).jPlayer("setMedia", stream);
},
pause: function() {
jQuery(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
jQuery(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
var stream2 = {
title: "Second",
mp3: "http://stream.x-x-x-x.com:1234/stream"
},
ready = false;
jQuery("#jquery_jplayer_12").jPlayer({
ready: function (event) {
ready = true;
jQuery(this).jPlayer("setMedia", stream2);
},
pause: function() {
jQuery(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
jQuery(this).jPlayer("setMedia", stream2).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
//]]>
</script>
HTML
<div id="jquery_jplayer_11" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="none"></audio>
</div>
<div id="jquery_jplayer_12" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="none"></audio>
</div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="pp-li"><a href="javascript:;" class="jp-play" tabindex="1" style="">play</a></li>
<li class="pp-li"><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;">pause</a></li>
<li class="mu-li"><a href="javascript:;" class="jp-mute" tabindex="1" title="mute" style="">mute</a></li>
<li class="mu-li"><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
<li class="vo-li"><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume" style="">max volume</a></li>
</ul>
<div class="jp-volume-bar" style="">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
</div>
</div>
<div id="jp_container_2" class="jp-audio-stream">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="pp-li"><a href="javascript:;" class="jp-play" tabindex="1" style="">play</a></li>
<li class="pp-li"><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;">pause</a></li>
<li class="mu-li"><a href="javascript:;" class="jp-mute" tabindex="1" title="mute" style="">mute</a></li>
<li class="mu-li"><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
<li class="vo-li"><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume" style="">max volume</a></li>
</ul>
<div class="jp-volume-bar" style="">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
</div>
</div>