TypeError: $(...).jPlayer is not a function

[abdul-ghaffar]

I am trying to add jplayer to moodle 3.5, it was working before on moodle 2.8 and 3.2. Now getting $('#jplayer_audio_1').jPlayer({..... is not a function. I am adding following piece of code (which is basically example from jplayer)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.4.1/add-on/jplayer.playlist.js"></script>

<script type="text/javascript">

            jQuery(document).ready(function ($) {

                var showTimeLeft = function (event) {
                    var timeLeft = event.jPlayer.status.duration - event.jPlayer.status.currentTime,
                            timeDisplay = '-' + $.jPlayer.convertTime(timeLeft),
                            $time = $(this).data('$time');
                    if ($time) {
                        $time.text(timeDisplay);
                    }
                };

                // Audio
                $('#jplayer_audio_1').jPlayer({
                    ready: function (event) {
                        var $time = $(event.jPlayer.options.cssSelectorAncestor + " .jp-current-time");
                        $(this).data('$time', $time).jPlayer('setMedia', {
                            mp3: 'http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3',
                            oga: 'http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg'
                        });
                    },
                    timeupdate: showTimeLeft,
                    durationchange: showTimeLeft,
                    cssSelectorAncestor: '#jp_gui_audio_1',
                    cssSelector: {
                        currentTime: ''
                    },
                    swfPath: 'lib',
                    supplied: 'oga, mp3',
                    smoothPlayBar: true,
                    keyEnabled: true,
                    wmode: 'window'
                });

            });
        </script>


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

        <div id="jp_gui_audio_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-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 class="jp-title">
                    <ul>
                        <li>Bubble</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>

[javaskript]

Looks like you’re only including the jplayer.playlist.js - you need to include the main jPlayer library as well.

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/add-on/jplayer.playlist.min.js"></script>

[auspicious-soft]

I have included these all files but facing same problem . $(...).jPlayer is not a function.

[zabierus]

I have included these all files but facing same problem . $(...).jPlayer is not a function.

me too

[jazclick]

Check your version the compatability of the software. Version are important and must match in order to function. Check also the folder name where you put the files.