function increment sync with video (or auto increment)

Question

I'm busy with a webdoc that I'm partially creating on hype, the video are hosted on vimeo (so I need to use the vimeo api for some tasks like seekto) but my difficulties should be limited to js.

the objective is to display a given image at a given time interval of the video. With my code below, I do get the string "test", "success" and "confirmed success" at the right time in my div id=popimgbox, and I can seek back and forth in the video and still get the right "answear", if I may say so.

Now, I have images that are all stored in the same folder, and all named popimgX.jpg, with X being a number.

I want

• to store the URLs of my images in a variable let's say "popimgurl"
  

• that my variable is updated (by a function???) in order to contain the URL of a given immage for a given interval of time of the video

• to still be able seekto back and forth in the video and get the right URL at the right time

To do so I created a function increment, and a pair of variable. With the code below, my popimgurl variable is indeed updated once the video reach 3 seconds, but it do not increment only once... untill the video reach 6 seconds, when I want to update my popimgurl variable once again.

I tried to use for with js break and js closure but did not manage for some understandable reasons after thought;

I did quite some try with switch, but I'm stuck with the fact that the case must be string or single numerical value, not numerical interval or comparaison.

thank's in advance for your help :-)

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, I'm a beginer coder, i do my best so excuse my french if my question isn't well formulated or if the answer is somewhere but I was unable to see/understand it

PS2 : i did quite a try with popcornjs, but not way to make it work with vimeoapi and within hype, quite frustrated ;-)

PS3: as this is my first post I would like to thank's you all for the great support available here; I owe you most ;-)

Answer 1

Finally I'll answer myself.

It's a solution that only stand for vimeo, as this is what I use to host my videos, but very little changes have to be done to work with the html5 <video> tag as well.

First you need to define your variables and your intervals:

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

Then you need to add an event listener timeupdate that return the elapsed time , filter intrevals according to the elapsed time data.seconds or seconds and define the value of index as the indexOf the last entry of your filtered array 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
}

And that's it !

Now for

• seconds = [0, 11.56[ --> index = 0
• seconds = [11.56, 44.08[ --> index = 1
• seconds = [44.08, 115[ --> index = 2

and so on

---

Now we can use index as a variable for instance to display a given image :

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'>"
    };
}

Don't forget, you need to call the function displayImage() in your timeupdate event listener, it will then be fired every ±250ms but the image won't be reloaded each time

PS : vimeo has realeased its new api between my question and my answer so the question use the old api while the answer use the new one