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 Ancestor，但这是不正确的 - 您需要提供＆＃34;所有cssSelectors的祖先的cssSelector＆＃34; （见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"
});

Answer 2

FF实际上并不播放MP3文件，而是播放OGG文件。如果以上更正的示例代码中的示例歌曲来自Lloyd，但是当您将MP3路径更改为服务器上的MP3文件并且它不起作用时，请确保您的服务器具有MIME类型“application / ogg”（不含引号））。服务器将在代码中看到MP3文件，并将其视为OGG应用程序文件。我不确定为什么这在我的服务器上有效。这不是我的发现，而是我在互联网上找到的一个提示。希望对你有效。

还要确保HTML头部有Lloyd的新Javascript，并且包含如下：

<head>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
  <script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>

<script type='text/javascript'>

//<![CDATA[ 
$(function(){

      Lloyd's javascript code goes here

});
//]]>  

</script>

</head>

提示：点击劳埃德的“小提琴”链接 - “播放”链接有效。

Answer 3

我不知道为什么它不适用于...但是opera和ff不播放mp3文件

swfPath: "js",
supplied: "mp3",
wmode: "window"

为了播放它们，js文件夹中有Jplayer.swf文件。您应该编写swfPath：“编写Jplayer.swf的轨道”......

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

3 个答案: