Using Player Enhancements for Live SSAI with Brightcove Player

In this topic, you will learn how to play a live stream with Brightcove Player that includes server-side ads that utilizes Player Enhancements for Live SSAI for an improved user experience.

Introduction

Brightcove's Player Enhancements for Live SSAI allows you to improve the ad breaks in live streams with ad counts, ad countdown timers, click through ads and companion ads. These live streams can be played using Brightcove Player.

If you are new to this feature, see the following:

Steps

To play live streams with player enhancements using the Brightcove Player, follow these steps:

Create or choose an existing player from the Video Cloud Studio's Players module.
Brightcove Player needs to be configured with the SSAI plugin. Follow the Add the SSAI plugin steps described in the Implementing SSAI programmatically section of the SSAI plugin document.

For Player Enhancements with Live SSAI, Brightcove Player requires the SSAI plugin (videojs-ssai). Currently, you cannot use Video Cloud Studio to add the SSAI plugin to your player, since it requires the ad configuration ID.
Follow the workflow in the Implementing Player Enhancements for Live SSAI document, up through and including creating your playback token.
Choose an implementation:
Continue with the workflow in the the Implementing Player Enhancements for Live SSAI document.

Standard embed code

When publishing a video from Video Cloud Studio's Media module, you can use the standard embed code to play your live stream. Follow these steps:

From the Media module, select your remote video for live streaming and publish it with an SSAI-enabled player.
Copy the standard embed code and paste it into your web page.

In the <iframe> tag, you should see an src attribute. To the end of this, add the adConfigId URL parameter with the value of your playback token.

<iframe src="https://players.brightcove.net/6027103979001/IqljF4Olr_default/
index.html?videoId=6089818309001&adConfigId=live.aaB61234aabbccdd567890"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540">
</iframe>

Your player is ready to play your live stream.

Advanced embed code

When publishing a video from Video Cloud Studio's Media module, you can use the advanced embed code to play your live stream. Follow these steps:

From the Media module, select your remote video for live streaming and publish it with an SSAI-enabled player.
Copy the advanced embed code and paste it into your web page.

In the <video-js> tag, add a data-ad-config-id attribute with the value of your playback token.

<video-js
  data-account="6027103979001"
  data-player="IqljF4Olr"
  data-embed="default"
  controls=""
  data-video-id="6089818309001"
  data-ad-config-id="live.aaB61234aabbccdd567890"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540">
</video-js>
<script src="https://players.brightcove.net/6027103979001/IqljF4Olr_default/index.min.js"></script>

Your player is ready to play your live stream.

Live SSAI source

Unlike VOD SSAI sources, Live SSAI sources do not include an initial VMAP. This is because Live SSAI streams don't know in advance when ad breaks will be included. Instead, ad breaks are triggered from cue points that you add to the live job.

Brightcove Live SSAI streams start with a standard HLS manifest URL with a specific naming scheme:

https://.../playlist_ssaiM.m3u8

The SSAI plugin looks for the _ssaiM.m3u8 suffix and the normal HLS MIME type

When publishing a video from Video Cloud Studio's Media module, you can play a Live SSAI stream as follows:

From the Media module, select your remote video for live streaming and publish it with an SSAI-enabled player.
Copy the advanced embed code and paste it into your web page.

To your page code, add the following code:

<video-js id="myPlayerID"
  data-account="6027103979001"
  data-player="IqljF4Olr"
  data-embed="default"
  controls=""
  data-video-id=""
  data-playlist-id=""
  data-application-id=""
  width="960" height="540">
</video-js>
<script src="https://players.brightcove.net/6027103979001/IqljF4Olr_default/index.min.js"></script>
<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.src({
      type: 'application/x-mpegURL',
      src: 'https://path/to/playlist_ssaiM.m3u8'
    })
  });
</script>

Your player is ready to play your live stream.