Cuepoints in HTML5 video tag

Question

I am in need of cue points for an HTML5 video player. I found Cuepoint.js except this is just for things like captions. I need things other than text to change when a cue point is hit.

I sort of made my own cue point logic, but I feel it isn't as efficient as it could be. I am dealing with a small array of times right now which isn't a big deal. I'm afraid when I get into the hundreds it could cause some performance issues.

This is what I came up and it is quite accurate:

function timeUpdate(event)
{
    var times = [3,8,13,19,25];
    currentTime = player.currentTime();
    $.each(times,function(key, value)
    {
        if (currentTime >= times[key] && currentTime <= times[key] + 0.3)
        {
            currentIndex++;
            loadAssets(currentIndex);
        }   
    });
}

The times array is just an example. Is there a more efficient way to do this or is this pretty much it?

Answer 1

Ronnie, You don't need to loop through that array. If the items are in order, just check against the first one, then up the currentIndex by one.

function timeUpdate(event)
{
    var times = [3,8,13,19,25];
    currentTime = player.currentTime();

    if (currentTime >= times[currentIndex])
    {
        currentIndex++;
        loadAssets(currentIndex);
    }   
}