我需要使用jwplayer创建一个可以播放视频特定区域的视频播放器 . 我这样做是为了减少我们需要在页面加载时加载的视频数量,并希望在以后需要调整时间时简化持续更新 . 我只想修改数据属性 .

我不希望请求页面刷新或不同的视频 .

目标:所需的行为是,按下按钮1,播放0-10秒并暂停 . 按下按钮2,播放11-20秒并暂停 . 点击第一个按钮并根据需要重复该行为 .

按钮会像这样存在:

我做了一些代码更新,但功能不完全正常 . 这只有在击中按钮两次后才有效...如果按下0-15,然后按15-25,则开始播放然后停止 . 我相信停止是由于在条件下停止我的呼叫?

<section>
    <div class="seeker" data-start="0" data-end="15">Go there and pause</div>
</section>
<section>
    <div class="seeker" data-start="16" data-end="20">Go there and pause</div>
</section>

 jwplayer("player").setup({
    file: "http://sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4",
 });
$(function(){
    $("section").each(function(){
        $(this).find(".seeker").bind('click',function(){
            var start = $(this).data('start'),
                end   = $(this).data('end');

            jwplayer().play();

            jwplayer().seek(start).onTime(function(event) {
                if(event.position>end) {
                 jwplayer().stop();
                }
            });

        });
    });

此代码适用于加载,因此功能无法正常工作,但我只需要附加到单击并使用'start','end'vars .

jwplayer().onReady(function(){ 
             jwplayer().seek(0).onTime(function(event) {
                 if(event.position>15) {
                     jwplayer().stop();
                 }
             });
        });

正在进行的工作在这里:http://jsfiddle.net/arkjoseph/n2rpq1t4/21/