Question

目标是创建一个只能通过外部事件播放的视频播放器，这是一次点击。 click事件包含一个数据attr，用于指定要播放的区域，即... 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。

HELP！

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时间搜索区域和重置变量

1 个答案: