我需要使用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/