sincronización de incremento de función con video (o incremento automático)

Estoy ocupado con un webdoc que estoy creando parcialmente enbombo, el video está alojado envimeo (así que necesito usar la vimeo api para algunas tareas como seekto) pero mis dificultades deberían limitarse a js.

el objetivo esmostrar una imagen determinada en un intervalo de tiempo determinado del video. Con mi código a continuación, obtengo la cadena "prueba", "éxito" y "éxito confirmado" en el momento correcto en mi div id = popimgbox, y puedo buscar de un lado a otro en el video y aún obtener el "answear correcto" ", si puedo decirlo.

Ahora, tengo imágenes que están almacenadas en la misma carpeta, y todas llamadas popimgX.jpg, con X como número.

yo quiero

para almacenar las URL de mis imágenes en una variable digamos "popimgurl"

que mi variable se actualiza (por una función ???) para contener la URL de una imagen determinada durante un intervalo de tiempo determinado del video

para poder seguir adelante y atrás en el video y obtener la URL correcta en el momento correcto

Para hacerlo, creé un incremento de función y un par de variables. Con el siguiente código, mipopimgurl La variable se actualiza una vez que el video alcanza los 3 segundos, perono se incrementa solo una vez... hasta que el video alcance 6 segundos, cuando quiera actualizar mi variable popimgurl una vez más.

Traté de usarpara conjs break yjs cierre pero no se las arregló por algunas razones comprensibles después de pensarlo;

Intenté bastante con el interruptor, pero estoy atascado con el hecho de que el caso debe ser una cadena o un valor numérico único, no un intervalo numérico o una comparación.

Gracias de antemano por tu ayuda :-)

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: descargo de responsabilidad, soy un programador principiante, hago mi mejor esfuerzo, así que disculpe mi francés si mi pregunta no está bien formulada o si la respuesta está en algún lugar pero no pude verla / entenderla

PS2: intenté bastante con popcornjs, pero no es una forma de hacerlo funcionar con vimeoapi y dentro del bombo, bastante frustrado ;-)

PS3: como esta es mi primera publicación, me gustaría agradecerles a todos por el gran apoyo disponible aquí; Te debo más ;-)

Respuestas a la pregunta(1)

Su respuesta a la pregunta