功能增量与视频同步（或自动增量）

Question

我忙于使用炒部分创建的webdoc，视频托管在 vimeo 上（所以我需要使用vimeo api执行一些任务，例如seekto）但我的困难应限于js。

目标是以视频的给定时间间隔显示给定图像。 使用下面的代码，我会得到字符串＆＃34; test＆＃34;，＆＃34; success＆＃34;并且＆＃34;确认成功＆＃34;在我的div id = popimgbox的正确时间，我可以在视频中来回寻找并且仍然得到正确的＆＃34; answear＆＃34;，如果我可以这么说的话。

现在，我的图像都存储在同一个文件夹中，所有图像都名为popimgX.jpg，X是一个数字。

我想要

• 将我的图片的网址存储在一个变量中，然后说＆＃34; popimgurl＆＃34;
  

• 我的变量更新（通过函数???），以便在给定的视频时间间隔内包含给定immage的URL

• 仍然可以在视频中来回寻找并在合适的时间获取正确的网址

为此，我创建了一个函数增量和一对变量。使用下面的代码，我的 popimgurl 变量确实会在视频达到3秒后更新，但它只会增加一次 ...直到视频达到6秒，我想再次更新我的popimgurl变量。

我尝试将用于用于 js break 和 js closure 但是在考虑之后没有出于某些可理解的原因进行管理;

我做了很多尝试用开关，但我坚持这样的事实，即案件必须是字符串或单个数值，而不是数字间隔或比较。

提前感谢您的帮助： - ）

var iframe = $('#vplayer_1')[0];
var player = $f(iframe);
var status = $('.status');              
fired = 0;

 //my try to sync increment      
var dia = (function () {
var n = 0;
return function increment() {return n += 1;}  
        })();

function dian(){
    popimgurl = '${resourcesFolderName}/popimg'+ dia() +'.jpg';
    popimgloader = '<img src ="' + popimgurl + '">'; 
}

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    status.text('ready');
    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});



// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});


function onPause(id) {
    status.text('paused');
}

function onFinish(id) {
    status.text('finished');
}


function onPlayProgress(data, id) {
    status.text(data.seconds + 's played');


    //my chapters, when I want the img to change within popimgbox
    if (data.seconds >= 1) {
        popimgbox.innerHTML = "test"; 
    }

    if (data.seconds >= 3) {
        // popimgbox.style.display = "success"
        dian();
        popimgbox.innerHTML = popimgurl;
    }               
    if (data.seconds >= 6) {
        // popimgbox.style.display = "confirmed success"
        dian();  
        popimgbox.innerHTML = popimgurl;
    }

}

PS1：免责声明，我是初学者，如果我的问题没有得到很好的解决，或者答案是在某个地方，但我无法看到/理解，那么我会尽力为法语辩解

PS2：我对popcornjs做了很多尝试，但没有办法让它与vimeoapi一起工作并且在炒作中，非常沮丧; - ）

PS3：因为这是我的第一篇文章，我要感谢大家的支持。我欠你最多; - ）

Answer 1

最后我会自己回答。

这是一个仅代表vimeo的解决方案，因为这是我用来托管我的视频的内容，但是使用html5 <video>代码也必须进行很少的更改。

首先，您需要定义变量和间隔：

var intervals =[11.56, 44.08, 115, 125, 127.92, 177.72];
var index;

然后，您需要添加一个返回已用时间的事件监听器timeupdate，根据已用时间intrevals或data.seconds过滤seconds并定义{的值{1}} index作为已过滤数组的最后一个条目indexOf

intervals

就是这样！

现在

• 秒= [0,11.56 [ - > index = 0
• 秒= [11.56,44.08 [ - ＆gt; index = 1
• 秒= [44.08,115 [ - ＆gt; index = 2

等等

现在我们可以使用player.on('timeupdate', function(data) { seconds = data.seconds; index = intervals.indexOf(intervals.filter(function(nb) { return seconds < nb; })[0]); if (diaIndex == -1) { // do something if seconds > the higher value of your last interval } 作为变量来显示给定的图像：

index

不要忘记，您需要在var imgNum = 0; function diaplayImg(index) { if(index === imgNum) { return; // this will avoid that the same image is releaded on every timeupdate events } else { imgNum =+ index document.getElementById('myImageWraper').innerHTML = "<img src='img" + imgNum+ ".png'>" }; } 事件监听器中调用函数displayImage()，然后每隔±250ms触发一次，但每次都不会重新加载图像

PS：vimeo已经在我的问题和我的答案之间发布了新的API，所以问题是使用旧api，而答案是使用新的api