Question

Ok I’m using the vimeo api and it provides my function with some data containing the percentage played of my video. I want to use this to find when the video finishes, and to ‘turn the lights back on’ then. Here is my code:

    function onplayProgress(data, id) {
$('#bottomtag').text(data.percent*100 + '% played');

    if ( data.percent == '1') {
$('body').animate({ backgroundColor: 'gray' }, 3000);
    }

}

The #bottomtag is just to debug, but it correctly shows the progress and eventually gets to 100% and stays there. So I can’t understand why my animation is not happening. Am I being really dense? I feel like semantically there should be a ‘when’ not an ‘if’ but that doesn’t exist.

=========EDIT=========

As pointed out by Zeta there is a Finish event that I could use. However I want my ‘lights’ to go up at 99% played and I also want to know why my code isn’t working. I’ve tried ~

if ( data.percent == '0.990')

~ and it still isn’t working. In regards to the calling of this function it is hooked to the Vimeo api as such:

player.addEvent('playProgress', onplayProgress);

Answer 1

The API provides a finish event. Use this instead to check whether your video has finished playing.

Edit: How can I light up the lights after 99%?

This is a little bit trickier, however, still easy to achieve:

function onplayProgress(data, id) {
    $('#bottomtag').text(data.percent*100 + '% played');
    if ( data.percent >= 0.990 && $('body').data("has-been-animated") !== true) {
        $('body').animate({ backgroundColor: 'gray' }, 3000);
        $('body').data("has-been-animated",true);
    }
}