Jplayer Ready function not triggered with flash solution

I am using Jplayer(2.2.0 & jquery 1.6) to play audio files in my application. The audio's has to use flash solution. But when the solution option is set to flash the ready function is not triggered and hence when i play the file there is error.

When googgled for this issue the recommended solution was to check the path of .swf file. The path is correct. This was double checked through Newtwork tab(chrome developer tool). In the network tab the .swf file was downloaded without any error.

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){

        jQuery("#jquery_jplayer_1").jPlayer({
            ready: function () {
                jQuery(this).jPlayer("setMedia", {
                    mp3: "http://www.happyworm.com/audio/mp3/Miaow-07-Bubble.mp3"
                }).jPlayer("play",40);
            },
            swfPath:"js/",
            ended: function (event){ 
                jQuery(this).jPlayer("play",20);
            },
            supplied:"mp3",
            solution:"flash,html",
            volume: .50,
    wmode:"window"
            //preload: 'auto'
        });


jQuery("#jquery_jplayer_N").bind(jQuery.jPlayer.event.error, function (event) {
    switch (event.jPlayer.error.type) {
        case jQuery.jPlayer.error.URL:
            console.log("error file");
            break;
        case jQuery.jPlayer.error.NO_SOLUTION:
            // Do something
            console.log("NO_SOLUTION");
            break;
    }
    console.log(event.jPlayer.error.type);
});
    });

<body>

    <div id="jquery_jplayer_1" class="jp-jplayer"></div>

    <div id="jp_container_1" class="jp-audio">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</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-mute" tabindex="1" title="mute">mute</a></li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                </ul>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
                <div class="jp-time-holder">
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>

                    <ul class="jp-toggles">
                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                    </ul>
                </div>
            </div>
            <div class="jp-title">
                <ul>
                    <li>Cro Magnon Man</li>
                </ul>
            </div>
            <div class="jp-no-solution">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a 
href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a></div></div>
</div>
</body>

check your styles. if your #jquery_jplayer_1 or its parent has display=none, ready event never fires in such browsers as opera or firefox. i mean flash object can't be hidden.

来源：https://stackoverflow.com/questions/19339810/jplayer-ready-function-not-triggered-with-flash-solution

标签

jquery

jplayer