javascript - FF 和 IE 中的多个 jPlayer 实例问题

Question

我有一个页面需要多个 jplayer 实例。在 Chrome/Safari 中一切正常，但在 FF 和 IE 中，播放器的第一个实例加载“播放”按钮和进度条，但音频不起作用。

对于第二个和第三个实例，“播放”按钮在那里，但没有进度条，也没有音频。我 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>

我已经删除了一些内联样式和其他无关的东西，比如下载按钮，但如果这太困惑/太丑陋，我可以添加完整的代码(我确定那里有额外的地方)。

Answer 1

• 除非您提供有效的 swfPath，否则 Firefox 和 IE 都不会播放 MP3 文件。
• 您正在提供 .jp-interface 元素作为 CSS 祖先，但这是不正确的 - 您需要提供“所有 cssSelectors 的祖先的 cssSelector”(参见 the docs)<

尝试更改我在 this Fiddle 中对您的代码所做的更改- 看看它是否适合你。

新的 HTML 标记如下所示

<div class="players">
    <div id="jp_container_1" 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>

<div class="players">
    <div id="jp_container_2" 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-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="players">
    <div id="jp_container_3" 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-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

和新的 Javascript:

$("#jquery_jplayer_1").jPlayer({
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    ready: function () {
        $(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2665_1315685839.mp3" });
    },
    play: function () { $(this).jPlayer("pauseOthers"); },
    supplied: "mp3"
});

$("#jquery_jplayer_2").jPlayer({
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    ready: function () {
        $(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2664_1315685834.mp3" });
    },
    play: function () { $(this).jPlayer("pauseOthers"); },
    cssSelectorAncestor:"#jp_interface_2",
    supplied: "mp3"
});

$("#jquery_jplayer_3").jPlayer({
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    ready: function () {
        $(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2660_1315685820.mp3" });
    },
    play: function () { $(this).jPlayer("pauseOthers"); },
    cssSelectorAncestor:"#jp_interface_3",
    supplied: "mp3"
});