Uncaught TypeError: $player.jPlayer is not a function

I’m helping a friend with his site and after updating his WordPress installation to address the recent security issue, the JPlayer plugin that was handling audio on his site stopped working.

Chrome’s console shows the error in the title, but I don’t know JS well enough to be able to debug it properly. I’m pretty sure that the plugin itself is loaded correctly, along with JQuery, in the page header. I checked it against the plugin’s instructions and it all appears fine.

Read More

I’ve also updated the plugin itself to ensure that it’s not some compatibility issue.

I did not build his site, nor am I familiar with this particular plugin at all, I’m just trying to see if it’s an easy fix or if I have to restore a backup.

I assume it has something to do with how his web designer (they had a falling out) implemented it in the main.js file, but that’s about as far as I’ve gotten.

Help?

Related posts

Leave a Reply

2 comments

  1. Really condensing and removing parts of main.js, it looks like

    var $player = false,
    
    $(document).ready(function() {
        if(!$player) {
            $("#jPlayer").jPlayer({
                ready: function() {
                    $player = $(this); // IT'S BEING SET HERE !
                    PlaylistPlay(playlistObject,trackIndex);
                }
            });
        } else {
            PlaylistPlay(playlistObject,trackIndex);
        }
    });
    
    function PlaylistPlay(lePID,trackIndex) {
        playTrack(trackIndex);  
    }
    
    function playTrack(index) { 
        $player.jPlayer("setMedia", {mp3: trackObject.mp3,oga: trackObject.oga}).jPlayer("play");
    }
    

    If you look closely at that, you’ll see that there is a distinct possibility that PlaylistPlay can be called without $player being set to $(this), it’s actually almost a certaintity, which means that $player is false, and doing

    false.jPlayer(...
    

    doesn’t really work, see the console output that confirms the variable is false

    enter image description here

  2. The plugin is not initializing correctly. On $(document).ready() it’s trying to initialize the plugin and it’s reporting a Flash error.

    Here’s the significant part of the code:

    $("#jPlayer").jPlayer({
        ...
        error: function(event) {
            var out = "<p id="noSolution">Sorry, you need an HTML5 capable browser or flash to be able to listen to music on this website.<br /> Reason: ";
            switch(event.jPlayer.error.type) {          
                case $.jPlayer.error.FLASH:
                    out += "A problem with the Flash insertion on the page.";
                break;
                ...
            }
        }
        ...
    });
    

    Digging a bit deeper, I can trace this back to the vimeo.jplayer in the specific code block:

    _flash_volume: function(a) {
        try {
            this._getMovie().fl_volume(a)
        } catch (b) {
            this._flashError(b)
        }
    }
    

    That function is throwing an exception because this._getMovie() does not have a property named fl_volume.

    The error you actually see is a side-effect of this failure. You could try removing the line: this._flashError(b) from the above statement and see if the error can be safely ignored.