migrate-from-froogaloop.md

Migrating from Froogaloop

Follow these steps to update your code from Froogaloop.

Step 1: Modify the embed code

The first step in the migration is to remove the api and player_id query parameters from the embed code. Query parameters are no longer required to enable the Player JS API. You can leave the player_id if you wish, but we encourage you to use the player object itself to keep track of multiple players.

Step 2: Update the constructors

The parameters passed to the constructor haven’t changed, so the only thing you’ll need to do is update the name:

var froogaloop = $f(iframe);

becomes:

var player = new Vimeo.Player(iframe);

Step 3: Remove the ready handler

The JS API library no longer requires you to wait for the ready event to begin using the player, so the ready handler can be completely removed.

froogaloop.addEvent('ready', function() {
    froogaloop.addEvent('pause', onPause);
});

becomes:

player.on('pause', onPause);

If you’d prefer to keep your setup code in a ready handler, you can use the ready() promise, but we’d recommend against using it.

player.ready().then(function() {
    player.on('pause', onPause);
});

Step 4: Update event listeners

The JS API library uses .on() to register events, so you’ll need to update any calls to .addEvent():

froogaloop.addEvent('finish', callback);

becomes:

player.on('ended', callback);

The data object passed to your event callback remains the same, so no changes are necessary for your callback function.

Note that some event names have been updated to match their equivalent name in the HTML spec:

old	new
playProgress	timeupdate
loadProgress	progress
finish	ended
seek	seeked

Step 5: Update method calls, getters, and setters

All methods, getters, and setters are now functions directly on the Player object, rather than being passed as a string to the .api() function:

froogaloop.api('getVideoUrl', function(url) {
    console.log('url:', url);
});

froogaloop.api('setColor', '00adef');

froogaloop.api('play');

becomes:

player.getVideoUrl().then(function(url) {
    console.log('url:', url);
}).catch(function(error) {
    console.error('error:', error.name);
});

player.setColor('00adef').then(function(color) {
    console.log('color set to:', color);
}).catch(function(error) {
    console.error('error setting color:', error.name);
});

player.play().catch(function(error) {
    console.error('error playing the video:', error.name);
});

Notice that all methods return a promise, so it’s a good idea to make sure that there is a catch() after every method call so you can react to any errors that may happen.