Client-Side Pre-Roll with Live SSAI

Overview

When delivering NextGen Live streams with server-side ad insertion (SSAI) using Brightcove Player, you can insert a client-side IMA pre-roll ad before the SSAI live stream begins. For server-side pre-roll configured on the channel, see SSAI pre-roll.

Getting started

1. Create an SSAI-enabled NextGen Live channel
2. Create a Brightcove player
3. Configure client-side pre-roll on the player

Create an SSAI-enabled live stream

Enable SSAI when you create or edit a NextGen Live channel. See Implementing Server-Side Ad Insertion in NextGen Live.

Create a Brightcove player

Create a player in Studio with the SSAI plugin configured for NextGen Live. See Implementing the NextGen Live SSAI Player Plugin.

Implementing client-side pre-roll

Configure both client-side IMA and server-side SSAI on the same player, then enable the ima_preroll_with_ssai player property.

1. Open the Players module and select your SSAI-enabled player.
2. On the Overview tab, open Advertising.
3. Turn on Enable Client-Side (IMA) and enter your IMA ad tag URL.
4. Turn on Enable Server-Side (SSAI) and select your ad configuration.
5. Open the JSON Editor on the Overview tab.
6. Add or set "ima_preroll_with_ssai": true in the player configuration.
7. Click Publish Changes.

Embed the player using Embed on Web from the NextGen Live Control Room. The embed includes the livePlaybackToken required for SSAI playback.

Listening to player events

When using ima_preroll_with_ssai, the player is disposed after the IMA pre-roll and re-initialized for SSAI playback. Event listeners bound before or during the IMA ad must be re-bound after the new player is created.

Wrap listeners in a dispose handler and a Video.js setup hook:

const playerId = 'samplePlayer';
let player = videojs.getPlayer(playerId);

player.on('ads-ad-started', (evt) => {
  player.log('IMA3: ads-ad-started', evt);
});

player.on('dispose', () => {
  videojs.hook('setup', (newPlayer) => {
    if (newPlayer.id() !== playerId) {
      return;
    }
    player = newPlayer;
    player.on('ads-ad-started', (evt) => {
      player.log('SSAI: ads-ad-started', evt);
    });
    player.on('bcov-ssai-click-through', (evt) => {
      player.log('SSAI: bcov-ssai-click-through', evt);
    });
  });
});