我需要使用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();
}
});
});
});
此代码适用于加载,因此功能无法正常工作,但我只需要附加到点击并使用&#39; start&#39;,&#39; end&#39;瓦尔。
jwplayer().onReady(function(){
jwplayer().seek(0).onTime(function(event) {
if(event.position>15) {
jwplayer().stop();
}
});
});
正在进行中的工作如下: http://jsfiddle.net/arkjoseph/n2rpq1t4/21/