Event on jplayer playing

Question

Been trying for the last hour or so but can't capture the event of jplayer playing.

I have tried a few different codes from other answers here on Stack Exchange but no luck.

e.g 1

$('video').bind('play', function (e) {
    alert('changed');
    console.log("test");
});

e.g 2

$('video').bind($.jPlayer.event.play, function(event) { 
     if (event.status.currentTime>0 && event.status.paused===false) {
        alert('changed');
}

I replaced the 'video' id by 'jp_video_0' and 'jquery_jplayer_1' - and actually not sure what is the video id.

My implementation of jplayer is fairly standard

<link href="{% static "jplayer/dist/skin/blue.monday/css/jplayer.blue.monday.css" %}" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="{% static "jplayer/dist/jplayer/jquery.jplayer.min.js" %}"></script>
        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){

            $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        title: "{{ x.data_name }}",
                        m4v: "{% autoescape off %}{{ x.data_file }}{% endautoescape %}"
                    });
                },
                swfPath: "{% static 'jplayer/dist/jplayer' %}",
                supplied: "m4v",
                size: {
                    width: "640px",
                    height: "360px",
                    cssClass: "jp-video-360p"
                },
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true,
                remainingDuration: true,
                toggleDuration: true,
                fullscreen: false,
                minPlaybackRate: 0.1,
                verticalPlaybackRate: true,
                keyEnabled: true
            });
        });
        //]]>
        </script>

        <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
            <div class="jp-type-single">
                <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                <div class="jp-gui">
                    <div class="jp-video-play">
                        <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                    </div>
                    <div class="jp-interface">
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                        <div class="jp-controls-holder">
                            <div class="jp-controls">
                                <button class="jp-play" role="button" tabindex="0">play</button>
                                <button class="jp-stop" role="button" tabindex="0">stop</button>
                            </div>
                            <div class="jp-volume-controls">
                                <button class="jp-mute" role="button" tabindex="0">mute</button>
                                <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                                <div class="jp-volume-bar">
                                    <div class="jp-volume-bar-value"></div>
                                </div>
                            </div>
                            <div class="jp-toggles">
                                <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                                <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                            </div>
                        </div>
                        <div class="jp-details">
                            <div class="jp-title" aria-label="title">&nbsp;</div>
                        </div>
                    </div>
                </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>

Note there are some django elements in the html

Not catching any event of the video playing even though the video is playing properly.

Answer 1

This page gave me the clue needed to understand how to use jplayer's events. It has to be implemented directly in the jplayer parameters. See below. It only took me one night of searching to figure this one out - hope it helps someone out there.

<script type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){

            $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        title: "{{ x.data_name }}",
                        m4v: "{% autoescape off %}{{ x.data_file }}{% endautoescape %}"
                    });
                },
                swfPath: "{% static 'jplayer/dist/jplayer' %}",
                supplied: "m4v",
                size: {
                    width: "640px",
                    height: "360px",
                    cssClass: "jp-video-360p"
                },
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true,
                remainingDuration: true,
                toggleDuration: true,
                fullscreen: false,
                minPlaybackRate: 0.1,
                verticalPlaybackRate: true,
                keyEnabled: true,
                play: function() {
                    \\ DO SOMETHING HERE <---------------
                }
            });
        });
        //]]>
        </script>