Ich bin mit einem Webdoc beschäftigt, den ich teilweise auf @ erstell Hype, das Video wird auf @ gehost vimeo (also muss ich die vimeo api für einige aufgaben wie seekto verwenden) aber meine schwierigkeiten sollten sich auf js beschränken.

das Ziel ist es, ein bestimmtes Bild in einem bestimmten Zeitintervall des Videos anzeigen. Mit meinem Code unten erhalte ich die Zeichenfolge "Test", "Erfolg" und "Bestätigter Erfolg" zur richtigen Zeit in meiner div id = popimgbox, und ich kann im Video hin und her suchen und trotzdem die richtige Antwort erhalten ", wenn ich das sagen darf

Jetzt habe ich Bilder, die alle im selben Ordner gespeichert sind und den Namen popimgX.jpg haben, wobei X eine Zahl ist.

Ich möcht

Um die URLs meiner Bilder in einer Variablen zu speichern, sagen wir "popimgurl"

dass meine Variable aktualisiert wird (durch eine Funktion ???), um die URL eines bestimmten Bildes für ein bestimmtes Zeitintervall des Videos zu enthalten

noch in der Lage zu sein, im Video hin und her zu gehen und die richtige URL zur richtigen Zeit zu erhalten

Zu diesem Zweck habe ich ein Funktionsinkrement und ein Variablenpaar erstellt. Mit dem Code unten, mein popimgurlie Variable @ wird zwar aktualisiert, sobald das Video 3 Sekunden erreicht hat, aberit nicht nur einmal inkrementieren ... bis das Video 6 Sekunden erreicht, wenn ich meine Popimgurl-Variable erneut aktualisieren möchte.

Ich habe versucht, @ zu verwendzu mitjs break undjs Closure aber aus verständlichen Gründen nicht geschafft;

Ich habe einige Versuche mit switch unternommen, aber ich stecke bei der Tatsache fest, dass der Fall ein String oder ein einzelner numerischer Wert sein muss, kein numerischer Intervall oder Vergleich.

Vielen Dank im Voraus für Ihre Hilfe :-

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, ich bin ein Anfänger-Programmierer, ich gebe mein Bestes, also entschuldige mein Französisch, wenn meine Frage nicht gut formuliert ist oder wenn die Antwort irgendwo ist, ich sie aber nicht sehen / verstehen konnte.

Ps2: ich habe einen ziemlichen versuch mit popcornjs gemacht, aber nicht so, dass es mit vimeoapi und im rummel klappt, ziemlich frustriert ;-)

PS3: Da dies mein erster Beitrag ist, möchte ich mich bei Ihnen allen für die großartige Unterstützung bedanken, die Sie hier finden. Ich schulde dir am meisten; -)