Using Player Enhancements for Live SSAI with Brightcove Player

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Device SDK Developer
Topic(s)
Advertising
SSAI
API(s)
Live API
SDK
Android
iOS
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:

  1. Create or choose an existing player from the Video Cloud Studio's Players module. Make sure it is enabled for Server-Side Ad Insertion (SSAI).
  2. Follow the workflow in the Implementing Player Enhancements for Live SSAI document, up through creating your playback token.
  3. Choose an implementation:

  4. 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:

  1. From the Media module, select your remote video for live streaming and publish it with an SSAI-enabled player.
  2. Copy the standard embed code and paste it into your web page.
  3. 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>
  4. 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:

  1. From the Media module, select your remote video for live streaming and publish it with an SSAI-enabled player.
  2. Copy the advanced embed code and paste it into your web page.
  3. 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>
  4. 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:

  1. From the Media module, select your remote video for live streaming and publish it with an SSAI-enabled player.
  2. Copy the advanced embed code and paste it into your web page.
  3. 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>
  4. Your player is ready to play your live stream.