У меня есть страница, которая вызывает несколько экземпляров jplayer.в Chrome / Safari все работает нормально, но в FF и IE первый экземпляр проигрывателя загружает кнопку воспроизведения и индикатор выполнения, но звук не работает.
для 2-го и 3-го экземпляра есть кнопка «воспроизведение», но нет ни индикатора выполнения, ни звука.Я на 90% уверен, что это проблема с моим файлом js, который выглядит следующим образом:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/demo.mp3"
});
},
ended: function (event) {
$(this);
},
supplied: "mp3"
}).bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/English_Commercial Demo.mp3"
});
},
ended: function (event) {
$(this);
},
cssSelectorAncestor:"#jp_interface_2",
supplied: "mp3"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_3").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/English_Narration_Demo.mp3"
});
},
ended: function (event) {
$(this);
},
cssSelectorAncestor:"#jp_interface_3",
supplied: "mp3"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
и вот HTML:
<div class="players">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer">
</div>
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
</ul>
<div class="jp-progress2">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_3" class="jp-jplayer"></div>
<div id="jp_interface_3" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
</ul>
<div class="jp-progress2">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
</div>
</div>
</div>
Я удалил некоторые извстроенный стиль и другие посторонние вещи, такие как кнопки «Загрузить», но могут добавить полный код, если это слишком запутанно / некрасиво (я уверен, что там где-то есть лишние).