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 <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