Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
abdul-ghaffar opened this issue Jan 9, 2019 · 4 comments
Open

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

abdul-ghaffar opened this issue Jan 9, 2019 · 4 comments

Comments

@abdul-ghaffar
Copy link

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
Copy link

javaskript commented Apr 18, 2019

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
Copy link

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

@carlos-1410
Copy link

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

me too

@jazclick
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants