2011-12-28 10 views
5

Ho problemi a riprodurre un file MP3 utilizzando jQuery Jplayer in Firefox 8. Ho installato l'ultimo flash per il mio browser e posso vedere che il file jplayer.swf è stato scaricato nella scheda Flash di Firebug.perché jPlayer non sta riproducendo i miei file MP3 in Firefox?

ho incluso i seguenti file in questo ordine:

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

E ho questo nel DOM che i carichi:

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

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

E Firefox non è in grado di riprodurre il file MP3. Posso anche vedere un oggetto nascosto che assomiglia a questo:

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

risposta

14

c'erano un paio di cose:

  1. A meno che non si specifica un esplicito Container Ancestor JPlayer impostazioni di default usa il DOM elemento con l'id #jp_container_1, che non ha fornito nel codice HTML
  2. Come FF HTML 5 audio non può riprodurre file MP3 richiede l'ultima JPlayer SWF al lavoro, il codice del costruttore JPlayer indicò una vecchia versione SWF.

Ecco un violino con la correzione: http://jsfiddle.net/75lb/gdLnT/

Il codice HTML corretto:

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

Il corretto 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", 
}); 
+0

grazie le modifiche sembra funzionare in violino, ma quando ho portato lo stesso codice per il mio progetto è didn lavorare Qualche errore salta fuori dicendo "JPlayer 2.1.0: id = 'jquery_jplayer':!.. Errore tentativo di impartire comandi di riproduzione dei media, mentre nessun URL di supporto sia impostato Usa setMedia() per impostare l'URL dei media Contesto : play " Qualche idea sul perché questo errore si verifichi in Firefox. Dal modo in cui ho provato a incollare tutto il codice di Iframe da Fiddle ma ancora questo errore si apre. Grazie – Gagan

+0

Ma quando ho copiato il codice da Iframe e ho spinto questa pagina statica in heroku, funziona. Qualche idea sul perché sta succedendo? Ha bisogno di un qualche tipo di hosting? – Gagan

+0

strano! È possibile pubblicare un collegamento a questa pagina statica? Lo controllerò ... – Lloyd

2

Ho avuto lo stesso problema che ho fatto un JPlayer playlist audio e file mp3 caricati al suo interno.

che stava lavorando su Chrome non su firefox

mi fisso che con l'aggiunta di una soluzione: il flash

$(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")}); 
Problemi correlati