синхронизация приращения функции с видео (или автоинкремент)
Я занят вебдоком, на котором частично создаюобманвидео размещено на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: так как это мой первый пост, я хотел бы поблагодарить вас всех за отличную поддержку, доступную здесь; Я должен тебе больше всего ;-)