Search code examples
flashfirefoxjplayer

How to use flash solution with jPlayer (Firefox)


I'm trying to install jPlayer on my website but it's not working on Firefox (22.0). The playlist is only displayed if I click on the random button, and then I can to play a song but the progress bar is always empty. When the DOM is ready, the list is empty (div with jp-playlist class).

Here is the code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var jplayer = new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_1",
                cssSelectorAncestor: "#jp_container_1"                                       
            }, [{
                    title="My title",
                    mp3 : "/music/my_song.mp3"
               },
               {
                   title="My title2",
                   mp3 : "/music/my_song2.mp3"
               }], 
            {
                    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
                    supplied: "mp3",
                    volume: .7,
                    wmode:"window",
                    solution: "html,flash"
            });
    });
</script>
<div id="jp_container_1" class="jp-video jp-video-270p">
    <div class="jp-type-playlist">
            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
            <div class="jp-gui">
            <div class="jp-interface">
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>
                <div class="jp-controls-holder">
                    <ul class="jp-controls">
                        <li><a href="javascript:;" class="jp-previous" tabindex="1">Pr&eacute;c&eacute;dent</a></li>
                        <li><a href="javascript:;" class="jp-play" tabindex="1">Jouer</a></li>
                        <li><a href="javascript:;" class="jp-pause" tabindex="1">Pause</a></li>
                        <li><a href="javascript:;" class="jp-stop" tabindex="1">Stop</a></li>
                        <li><a href="javascript:;" class="jp-next" tabindex="1">Suivant</a></li>
                    </ul>
                    <div class="sound-bar">
                        <ul class="jp-controls sound">
                            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="Muet">Mute</a></li>
                            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="Actif">Unmute</a></li>
                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="Volume max">Volume max</a></li>
                        </ul>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                    </div>
                    <ul class="jp-toggles">
                        <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="Al&eacute;atoire">Al&eacute;atoire</a></li>
                        <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="D&eacute;sactiver al&eacute;atoire">Non al&eacute;atoire</a></li>
                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="R&eacute;p&eacute;ter">R&eacute;p&eacute;ter</a></li>
                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="D&eacute;sactiver r&eacute;p&eacute;tition">Ne pas r&eacute;p&eacute;ter</a></li>
                    </ul>
                </div>
                <div class="jp-title">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jp-playlist">
            <ul>
                <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                <li></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/jPlayer/jplayer.min.js"></script>
<script type="text/javascript" src="/js/jPlayer/add-on/playlist.min.js"></script>

Thanks for your help


Solution

  • Change swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", to « swfPath: "js",.

    I believe the swfPath should be the path to the folder that holds the .swf file, not a normal path the the file itself.

    "The Jplayer.swf file must be uploaded to your server. The default location is relative to your current page in a folder named "js". To modify the location of the Flash file, use the swfPath constructor option. Below is how to set the swfPath to a path relative to the server root. See the jPlayer({swfPath}) constructor option for more information." - http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response