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

Question

我正忙于在 hype 上部分创建的网络文档，该视频托管在 vimeo 上（所以我需要使用 vimeo api 来完成某些任务，例如 seekto），但我的困难应该仅限于 js。

objective 是在视频的给定时间间隔显示给定图像。使用下面的代码，我确实在 div id=popimgbox 中的正确时间得到了字符串 "test"、"success" 和 "confirmed success"，并且我可以在视频并仍然得到正确的 "answear"，如果我可以这样说的话。

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

我要

将我图像的 URL 存储在一个变量中，比方说 "popimgurl"
我的变量已更新（通过函数？？？）以便在视频的给定时间间隔内包含给定图像的 URL
还能在视频中来回寻找，在正确的时间得到正确的URL

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

我尝试将 for 与 js break 和 js closure 一起使用，但没有成功经过深思熟虑后出于一些可以理解的原因；

我对 switch 做了很多尝试，但我坚持这样一个事实，即大小写必须是字符串或单个数值，而不是数值间隔或比较。

提前感谢您的帮助:-)

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：免责声明，我是一名初学者编码员，我会尽力而为，如果我的问题表述不当或者答案在某处但我无法做到，请原谅我的法语 see/understand它

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

PS3：因为这是我的第一个 post 我要感谢大家在这里提供的大力支持；我最欠你的;-)

Answer 1

最后我会自己回答。

这是一个仅代表 vimeo 的解决方案，因为我用它来托管我的视频，但只需做很少的更改即可与 html5 <video> 标签一起使用.

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

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

然后你需要添加一个事件监听器timeupdate，即return经过的时间，根据经过的时间data.seconds或seconds过滤intrevals并将 index 的值定义为 indexOf 过滤数组的最后一个条目 intervals

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
}

就是这样！

现在

秒 = [0, 11.56[ --> 索引 = 0
秒 = [11.56, 44.08[ --> 索引 = 1
秒 = [44.08, 115[ --> 索引 = 2

等等

现在我们可以使用 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'>"
    };
}

别忘了，您需要在 timeupdate 事件侦听器中调用函数 displayImage()，然后它会每隔 ±250 毫秒触发一次，但图像不会每次都重新加载

PS : vimeo 在我的问题和我的答案之间释放了新的 api 所以问题使用旧的 api 而答案使用新的

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

function increment sync with video (or auto increment)

javascript

video

synchronization

vimeo-api