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>