为什么jPlayer无法在Firefox中播放我的MP3文件? [英] why is jPlayer not playing my MP3 files in Firefox?

问题描述

我无法在Firefox 8中使用jQuery Jplayer播放MP3文件. 我已经为浏览器安装了最新的Flash，并且可以在Firebug的Flash标签中看到jplayer.swf文件正在下载.

I am having trouble playing an MP3 file using jQuery Jplayer in Firefox 8. I have installed the latest flash for my browser and I can see that the jplayer.swf file is being downloaded in the Flash tab of Firebug.

我按此顺序添加了以下文件:

I included the following files in this order:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="https://raw.github.com/happyworm/jPlayer/master/jquery.jplayer/jquery.jplayer.js" type="text/javascript" charset="utf-8"></script>

我在加载的DOM中有这个

And I have this in the DOM that loads:

  $("#jquery_jplayer").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        mp3: "http://sound26.mp3pk.com/indian/ladiesvsricky/ladiesvsrickybahl01(www.songs.pk).mp3"

      });
    },
    swfPath: "http://cloudfactory-transcription.s3.amazonaws.com/javascripts/",
    supplied: "mp3",
    volume: 1,
    wmode:"window",
    solution: "html,flash"
  });

我有这个HTML:

<div id="jquery_jplayer" style="height: 0px"></div>
          <div class="jp-audio">
            <div class="jp-type-single">
              <div id="jp_interface_1" class="jp-interface all_rounded_corners">
                <ul class="jp-controls">
                  <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
                  <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
                  <li><a href="#" class="jp-previous traverse" tabindex="1">Previous</a></li>
                </ul>
                <div class="jp-progress" style = "display:none;">
                  <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

并且Firefox无法播放MP3文件.我还可以看到一个看起来像这样的隐藏对象:

And Firefox is not able to play the MP3 file. I can also see a hidden object which looks like this:

<object width="1" height="1" id="jp_flash_0" data="http://cloudfactory-transcription.s3.amazonaws.com/javascripts/Jplayer.swf" type="application/x-shockwave-flash">  <param name="flashvars" value="jQuery=jQuery&amp;id=jquery_jplayer&amp;vol=1&amp;muted=false">
<param name="allowscriptaccess" value="always">
<param name="bgcolor" value="#000000">
<param name="wmode" value="window">
</object>

推荐答案

有几件事:

1. 除非您指定明确的容器祖先 jPlayer默认设置使用ID为#jp_container_1的DOM元素，而您未在HTML中提供该元素
2. 由于FF HTML 5音频无法播放MP3，因此需要最新 jPlayer SWF才能正常工作，您的jPlayer构造函数代码指向的是旧 SWF版本.

1. Unless you specify an explicit Container Ancestor jPlayer defaults to using the DOM Element with the Id #jp_container_1, which you did not supply in your HTML
2. As FF HTML 5 Audio cannot play MP3 it requires the latest jPlayer SWF to work, your jPlayer constructor code pointed to an old SWF version.

以下是修正的小提琴: http://jsfiddle.net/75lb/gdLnT/

Here is a Fiddle with the Fix: http://jsfiddle.net/75lb/gdLnT/

更正后的HTML:

<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface all_rounded_corners">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-previous traverse" tabindex="1">Previous</a></li>
        </ul>
        <div class="jp-progress" style = "display:none;">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
      </div>
    </div>
</div>

更正后的Javascript:

The corrected Javascript:

$("#jquery_jplayer").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", { mp3: "http://sound26.mp3pk.com/indian/ladiesvsricky/ladiesvsrickybahl01(www.songs.pk).mp3" } );
    },
    //swfPath: "http://cloudfactory-transcription.s3.amazonaws.com/javascripts/",
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    supplied: "mp3",
    volume: 1,
    wmode:"window",
    solution: "html,flash",
});

这篇关于为什么jPlayer无法在Firefox中播放我的MP3文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！