синхронизация приращения функции с видео (или автоинкремент)

Я занят вебдоком, на котором частично создаюобманвидео размещено наVimeo (поэтому мне нужно использовать vimeo api для некоторых задач, таких как seekto), но мои трудности должны быть ограничены js.

цель состоит в том, чтобыотображать заданное изображение в заданный промежуток времени видео, С моим кодом, приведенным ниже, я получаю строку «test», «success» и «подтвердил успех» в нужное время в моем div id = popimgbox, и я могу искать назад и вперед в видео и по-прежнему получать правильный «answerear «Если можно так сказать.

Теперь у меня есть изображения, которые хранятся в одной папке, и все они называются popimgX.jpg, где X - это число.

я хочу

чтобы хранить URL-адреса моих изображений в переменной, скажем, «popimgurl»

что моя переменная обновлена ​​(функцией ???) для того, чтобы содержать URL данного изображения для данного интервала времени видео

чтобы по-прежнему можно было искать в видео туда и обратно и получить правильный URL в нужное время

Для этого я создал функцию приращения и пару переменных. С кодом ниже, мойpopimgurl переменная действительно обновляется, как только видео достигает 3 секунд, нооно не увеличивается только один раз... пока видео не достигнет 6 секунд, когда я захочу обновить переменную popimgurl еще раз.

Я пытался использоватьза сJS Break а такжезакрытие JS но не сумел по понятным причинам после размышления;

Я сделал несколько попыток с переключателем, но я застрял с тем фактом, что регистр должен быть строкой или единственным числовым значением, а не числовым интервалом или сравнением.

Заранее спасибо за помощь :-)

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: Disclamer, я начинающий программист, я делаю все возможное, поэтому извините мой французский, если мой вопрос не сформулирован правильно или если ответ где-то, но я не смог увидеть / понять его

PS2: я довольно старался с popcornjs, но никак не мог заставить его работать с vimeoapi и в ажиотаже, довольно разочарован ;-)

PS3: так как это мой первый пост, я хотел бы поблагодарить вас всех за отличную поддержку, доступную здесь; Я должен тебе больше всего ;-)

Ответы на вопрос(1)

Ваш ответ на вопрос