jPlayer and IE10 - SCRIPT438: Object doesn't support property or method 'jPlayer'

Question

I'm using the jPlayer in a very simplistic Setup, but I can't get it to work in a stable way, which is confusing, as I really only use the Basic parts of the jPlayer. Basically, it only consists of a Play an a Pause button. I have six Players per site though. As to many browsers this seems to work, in most cases. No browser has shown to work the code 100% stable. I'm mainly having trouble with the IE10, though, and this is the one I really need it wo work in.

In ~60% of the cases I get a error message with this code.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://www.unipark.de/uc/musikmaerkte/images/jquery.jplayer.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#jquery_jplayer_1").jPlayer({
            ready: function() {$(this).jPlayer("setMedia", {mp3: "[media here]", oga: "[media here]", m4a: "[media here]"});},
            play: function() {$(this).jPlayer("pauseOthers");},
            ended: function() {$(this).jPlayer("play");},
            swfPath: "[swfPath]",
            wmode:  "window",
            supplied: "mp3, ogg, m4a"
        }); 
        $("#jquery_jplayer_2").jPlayer({
            ready: function() {$(this).jPlayer("setMedia", {mp3: "[media here]", oga: "[media here]", m4a: "[media here]"});},
            play: function() {$(this).jPlayer("pauseOthers");},
            ended: function() {$(this).jPlayer("play");},
        swfPath: "[swfPath]",
        wmode: "window",
            supplied: "mp3, ogg, m4a",
            cssSelectorAncestor: "#jp_container_2"
        }); 

The same code as for the second Player is used for 4 more players. (I had to take out the media links and the swfPath, because stackoverflow wouldn't let me. I made 100% sure they're working though.)

The error message in the console (F12) reads

SCRIPT438: Object doesn't support property or method 'jPlayer'

and refers to the lines 6 and 14 of the code extract above (for each Player, so in total 6 times).

Whenever the errors occur, I subsequently can't use the Players, and clicking on the play button doesn't change anything. When the errors dont appear (~40% of cases), everything seems to work fine. It puzzles me that it doesnt behave in a calculable way, and that it seems to be completely arbitrary about when it's working and when not.

The HTML part loos like this, for each Player respectively:

<div id="jquery_jplayer_6" class="jp-jplayer"></div>
    <div id="jp_container_6" class="jp-audio">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <div class="jp-controls">
                    <a href="javascript:;" class="jp-play" tabindex="1"><img src="images/play.png" /></a>
                    <a href="javascript:;" class="jp-pause" tabindex="1"><img src="images/pause.png" /></a>
                </div>
            </div>
            <div class="jp-no-solution">
                <span>NoFlash</span>
            </div>
        </div>
    </div>                          
</div>

A lot of time has been used to test it, and although I'm almost sure, the HTML part is fine as it is, I'm glad about any comments on this part as well!

I tried stuff already to get it to work in a stable way:

• $(document).ready(function() {...} instead of $(function() {...}
• Made sure the referenced files and folders are valid.
• I tried to use the flash fallback by using solution: "flash,html" in the constructor. Didn't change anything though.
• I read through a lot of other posts concerning either compability problems with jPlayer, or the specific error SCRIPT438, but none seemed to contain any solution for this case.

Any hints, ideas, solutions? Every thought is welcome. Cheers!

Answer 1

I guess you've resolved this by now but I received the same issue when the jplayer JavaScript file wasn't being referenced properly. Perhaps downloading the script files and referencing them with a relative src path may help.