Command Queue

When using the player API it can be challenging to detect when it’s ready to be used. Use the command queue to submit functions for the player to call when it’s ready.

1.0 | Single player on the page

Using the command queue is simple when your page contains only a single player. Simply make sure a few global variables are set, and then start adding functions for the player to call to the queue.

The first argument to the callback function is always a reference to the player API.

// Ensure the following globals are available
window.bluebillywig = window.bluebillywig || {};
window.bluebillywig.cmd = window.bluebillywig.cmd || [];

window.bluebillywig.cmd.push(function($$api) {
    $$api.on('volumechange', function() {
        console.log('The volume changed!');
    });
});

2.0 | Multiple players on the page

A page containing multiple players requires a different approach: it’s necessary to specify which player should consume which request in the command queue. When omitted, the request is consumed by the first player, and ignored by the other players on the page.

To specify the player which should consume a request, either a playerId or playerAlias has to be specified alongside the callback function.

// Ensure the following globals are available
window.bluebillywig = window.bluebillywig || {};
window.bluebillywig.cmd = window.bluebillywig.cmd || [];

// This request will be consumed by the player embedded with playout "default" and mediaclip 123456
window.bluebillywig.cmd.push({
    playerId: '/p/default/c/123456',
    callback: function($$api) {
        $$api.setMuted(true);
    }
});

// This request will be consumed by the player embedded with playout "someotherplayout" and mediaclip 56789
window.bluebillywig.cmd.push({
    playerId: '/p/someotherplayout/c/56789',
    callback: function($$api) {
        $$api.setMuted(false);
    }
});

window.bluebillywig.cmd.push({
    playerAlias: 'my-unique-player-alias',
    callback: function($$api) {
        $$api.setMuted(false);
    }
});

The playerId always follows the following structure:

/p/{PLAYOUT_CODE}/{CONTENT_TYPE_INDICATOR}/{CONTENT_ID}

Where:

• {PLAYOUT_CODE} is the URL-safe code of the playout used to place the player
• {CONTENT_TYPE_INDICATOR} is a single character indicating the type of embed.
  • c for mediaclips
  • l for playlists
  • p for projects
  • a for outstream ad units
  • q for query embeds
• {CONTENT_ID} refers to object id of the content you’re embedding for mediaclips, playlists and projects. For ad units, it’s the code of the ad unit. For query embeds, it’s the query.

The playerAlias can be set by supplying a string value to the alias key at the root of the object used to initialize the player, and will always match the code provided to a VAST renderer during bootstrap.