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 是共享状态，然后分叉 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')
            );
        });
    });

});

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

JWPlayer time seek area and reset vars

javascript

jquery

events

jwplayer

seek