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

issue with multiple instances of jPlayer in FF and IE

本文关键字：jPlayer 实例 问题 存在 FF IE      更新时间：2023-09-26

我有一个页面，调用多个实例的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>

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

  • Firefox和IE都不能播放MP3文件，除非您提供有效的swfPath。
  • 你提供了一个.jp-interface元素作为CSS祖先，但这是不正确的-你需要提供"所有cssSelector的祖先的cssSelector"(见文档)

尝试更改你的代码我在这个提琴-看看它是否适合你。

新的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"
});

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>

提示:点击劳埃德的"小提琴"链接-"播放"链接工作。

我不知道为什么它不工作在ie…但是opera和ff不能播放mp3文件

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

为了播放它们，在js文件夹中有Jplayer.swf文件。你应该写swfPath: "write the track of Jplayer.swf"…

相关文章：