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

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

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