jplayer播放事件

Question

我已经尝试了大约一个小时，但无法捕捉到jplayer播放的事件。

我在Stack Exchange上尝试了几个与其他答案不同的代码，但没有成功。

例1

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

例2

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

我用'jp_video_0‘和'jquery_jplayer_1’替换了' video‘的id --实际上我不确定视频的id是什么。

我的jplayer实现是相当标准的。

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

请注意，html中有一些django元素。

即使视频正在正常播放，也没有捕捉到视频播放的任何事件。

Answer 1

This page给了我理解如何使用jplayer事件所需的线索。它必须直接在jplayer参数中实现。见下文。我只花了一个晚上的时间就弄明白了这一点--希望它能帮助到其他人。

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