爲什麼jPlayer不能在Firefox中播放我的MP3文件？

Question

我在使用jQuery Jplayer的Firefox 8中播放MP3文件時遇到了問題。 我安裝了瀏覽器的最新Flash，我可以看到jplayer.swf文件正在Firebug的Flash選項卡中下載。

我包含在這個順序下列文件：

<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加載：

$("#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文件。我還可以看到一個隱藏的對象，看起來像這樣：

<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> 

Answer 1

有幾件事情：

1. 除非你指定一個明確的Container Ancestor jPlayer默認使用DOM元素與標識#jp_container_1，你沒有在你的HTML提供
2. 作爲FF HTML 5音頻無法播放MP3它需要最新 jPlayer SWF工作，您jPlayer構造函數代碼指向一個老 SWF版本。

這裏是修復一個小提琴：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：

$("#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", 
}); 

Answer 2

我有同樣的問題，我做了一個jplayer音頻播放列表和加載的MP3文件。

，它正在對鉻不會在Firefox

我固定，通過添加解決方案：閃存

$(document).ready(function(){ 

    var myPlaylist = new jPlayerPlaylist({ 
    jPlayer: "#jquery_jplayer_1", 
    cssSelectorAncestor: "#jp_container_1" 
    }, [ 
    { 
     title:"Cro Magnon Man", 
     artist:"miaow", 
     mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", 
     oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg" 
    } 

    ], { 
    playlistOptions: { 
    enableRemoveControls: true 
    }, 
     swfPath: "js", 
    supplied: "mp3", 
    wmode: "window", 
    solution: "flash", 
    }); 

    $("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});