Search code examples
javascriptjqueryflashjplayer

jPlayer complains about valid swfPath

Major update at end of post

I'm initializing jPlayer with the following code. It's working great on all modern browsers and on mobile devices.

$("#jquery_jplayer_1").jPlayer({
        supplied: "mp3",
        swfPath: "/js/jQuery.jPlayer.2.4.0",
        solution: "html,flash",
        errorAlerts: true,
        ended: function () {
            console.log('ended event fired');
            $.getScript('/js/random_show.js.php');
        }
    });

However testing in IE 8 and IE 7 I get the following error from the fallback SWF player:

error message

If I open mysite.com/js/jQuery.jPlayer.2.4.0 the SWF loads without issue. I have tried letting the page sit for a while to see if that helped. It does not.

Per suggestion tried with working URL but have same error now with complete path listed. Path taken from browser after loading swf so most definitely correct. I had pasted code here but SO objected to body of post containing the URL... Here is new error message.

new error

Another update: Tried linking directly to copy of SWF hosted by jPlayer per Josh D suggestion below. Same error. Upgraded to 2.5.0 from 2.4.0. Same error.

enter image description here

How can I get the fallback working?

Major update 12/12/2013

I have set up a sandbox copy of the site here: http://www.itsneworleans.dreamhosters.com/shows/happy-hour Hit Listen to see error message.

I have eliminated the HTML5 solution and use only the Flash. This allows any browser to trigger the error.

After dismissing the error Chrome debugger reports a 200 status for the swf so this is not a 404 swf problem. Anyone have an idea re this error?

After error below is dismissed.

200 Status

Chrome error message

chrome error

Solution

  • I added a jPlayer.ready() function with console output to my initialization. I found it only fired when the player was already visible AND there was no complaint about the Flash solution not being found.

    After some more searching based on that result I found this post:

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

    What was happening was that jPlayer's Flash solution was failing to load because my player had display set to none.

    So now I have offscreened player via a negative margin-top and instead of animating height I animate margin-top. It's all working now.