目标是创建一个只能通过外部事件播放的视频播放器,这是一次点击。 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!
答案 0 :(得分:2)
我稍微调试了一下,试着找出奇怪的行为是什么。
我注意到,每次点击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')
);
});
});
});