javascript - JWPlayer 时间搜索区域和重置变量

Question

目标是创建一个只能通过外部事件(即点击)播放的视频播放器。点击事件包含指定播放区域的数据属性，即... 10 秒到 25 秒。

存在多个按钮。每次时间到后，需要暂停视频。

按钮序列将以随机顺序出现。

示例代码如下: http://jsfiddle.net/arkjoseph/n2rpq1t4/28/

    <div id="player"></div>


<section>
    <div class="seeker" data-start="0" data-end="5">Go to 0-5</div>
</section>
<section>
    <div class="seeker" data-start="6" data-end="10">Go to 6-10</div>
</section>



$(function(){

    $("section").each(function(){
        $(this).find(".seeker").on('click',function(event){
            var start = $(this).data('start'),
                end   = $(this).data('end');
            seekitnow(start,end);              
        });
    }); 
});

function seekitnow(start,end) {
    jwplayer("player").seek(start).onTime(function(event) {
        var start;
        if(event.position >= end) {
            this.pause();
        }
        //var end;
     });
   }

在一定程度上起作用，但每次单击按钮都会注册已存储的现有变量(开始/结束)。我怎样才能防止这种情况发生？

如果我单击按钮 1 (0-5)，它会正常工作。如果我点击 6-10，视频停止并且控制台有 0,5,6,10。

帮助!

Answer 1

我对此进行了一些调试，试图找出奇怪的行为到底是什么。

我注意到每次点击 Go to 0-5 和 Go to 6-10 部分时，jwPlayer.onTime() 在创建新的 jwPlayer 处理程序 (jwplayer("player").seek(start).onTime(function(event) {) 时被调用，这导致新的回调被添加到jwPlayer 时间更改事件的回调队列。

当我继续点击这些部分时，这导致了很多奇怪的行为。

我更改了代码，以便 onTime() 只执行一次并且 end 是共享状态，然后 fork jsFiddle。

结果是:

• 点击 Go to 0-5 时，视频会寻找时间 0，然后暂停当达到第二个 5 时。
• 当点击 Go to 6-10 时，视频寻找第二个 5，并在达到第二个 10 时暂停。

这是正确的行为吗？:https://jsfiddle.net/a8dao9d4/

jwplayer("player").setup({
    file: "https://player.vimeo.com/external/135492851.hd.mp4?s=a61836463fbde188aaa1e24e6bfeeb39&profile_id=113",
    startparam: "starttime",
});

$(function(){

    var player = jwplayer("player");
    var end = 32;

    player.onTime(function(event) {
        if(event.position >= end) {
            this.pause();
        }
    });

    $("section").each(function(){
        $(this).find(".seeker").on('click',function(event){
            end = $(this).data('end');

            player.seek(
                $(this).data('start')
            );
        });
    });

});