CODEWITHSUNDEEP
javascriptvimeo-apifroogaloop
pgblu
pgblu

Reputation: 702

Froogaloop 'finish' event is also firing a 'pause' event

In my page initialization script, I have the following code:

var iframe = document.getElementById('video');
var player = Froogaloop(iframe);
player.addEvent('ready', function() {
    player.addEvent('play', function() {
        console.log('Played video');
    });
    player.addEvent('pause', function() {
        console.log('Paused video');
    });
    player.addEvent('finish', function() {
        console.log('Finished video');
    });
});
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="video" src="//player.vimeo.com/video/132283541?title=0&amp;byline=0&amp;portrait=0&amp;color=e00400&amp;api=1&amp;player_id=video" width="200" height="150" frameborder="0" crossorigin="anonymous" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

When the video finishes, I get both a pause event report AND a finish event report. Anyone know why this is? If there's nothing wrong with my code, is there a workaround for this, using timeouts or something similar?

Upvotes: 1

Views: 305

Answers (1)

pgblu
pgblu

Reputation: 702

I changed the js snippet to read as follows:

var iframe = document.getElementById('video');
var player = Froogaloop(iframe);
player.addEvent('ready', function() {
    var pauseEvent = null;
    var finishEvent = null;
    player.addEvent('play', function() {
        console.log('Played video');
        pauseEvent = null;
        finishEvent = null;
    });
    player.addEvent('pause', function() {
        pauseEvent = setTimeout( function() {
            console.log('Paused video');
        }, 5);
        if (finishEvent) {
            clearTimeout(pauseEvent);
        }
    });
    player.addEvent('finish', function() {
        finishEvent = setTimeout( function() {
            console.log('Finished video');
        }, 5);
        if (pauseEvent) {
            clearTimeout(pauseEvent);
        };
    });
});

This works, though I think one can see that it's a bit convoluted. There are two clearTimeout calls because we cannot be sure whether the order in which the 'finish' and the (spurious) 'pause' are reported is the same as the order in which they are detected.

While I hope this is helpful to others, I'm sure it's not the final word on this mysterious issue.

Upvotes: 0

Related Questions