Server-Side Ad Insertion (SSAI) plugin

The SSAI plugin allows you to serve ads that are dynamically inserted into video content at the server level before content is delivered to the viewer's device. This is in contrast to client-side ad insertion (CSAI), where the viewer's device inserts ads during playback. Ad insertion on the server side is typically in real-time or near real-time. SSAI offers several advantages over CSAI, such as:

• Server-level ad insertion makes advertisements less susceptible to ad blockers used by viewers, resulting in higher delivery rates.
• SSAI allows for more precise ad targeting based on real-time viewer data, leading to higher ad relevance and engagement.
• Ads are seamlessly integrated into the video stream. Therefore, viewers experience smooth playback without buffering or quality degradation during ad transitions.

The SSAI plugin can be configured to work with Google's Interactive Media Ads Dynamic Ad Insertion (IMA DAI) SDK and with Yospace.

Before you start

For Google's IMA DAI integration to work with the SSAI plugin, you need the following:

• Access to a Google Ad Manager 360 Advanced account and a contract with Google to enable DAI.
• To use IMA DAI pod serving, you must be working with a pod-serving partner.

Install the plugin

To install the SSAI plugin, include the plugin script next to the core player:

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ssai.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/id3.min.js"></script>

You must load the ID3 Metadata plugin to handle timed metadata and listen to timed metadata events. For more, see Handle timed metadata in linear DAI streams.

Configure the plugin with DAI

You can configure the SSAI plugin for use with the Google IMA DAI SDK, allowing for the seamless integration of server-side ad stitching techniques. The IMA DAI SDK returns a combined video stream, so you don't have to manage switching between ad and video content within your application. We support both of Google's Full service and Pod serving DAI solutions.

The tables in this section outline the SSAI plugin configuration properties available when configuring the player with Google's IMA DAI SDK. The SSAI plugin is configured under the src namespace.

In addition to the mentioned properties, the SSAI plugin supports all stream request properties available with Google IMA DAI SDK. For a full list, see these references:

• Full service live - LiveStreamRequest class
• Full service VOD - VODStreamRequest class
• Pod serving live - PodStreamRequest class
• Pod serving VOD - PodVodStreamRequest class

You can use these Google IMA sample streams when testing streams with your workflows.

DAI VOD stream parameters

These properties can be used when configuring the player with a DAI VOD stream request.

Example

The following example demonstrate how to incorporate a request for VOD assets using the DAI full-service solution. Aside from the type property, values in these examples are placeholders and must be replaced with your own.

var player = flowplayer('#container', {
  src: [{
    contentSourceId: "2548831",
    videoId: "tears-of-steel",
    type: "google/dai",
    backupStream: "http://storage.googleapis.com/testtopbox-public/video_content/bbb/master.m3u8"
  }]
});

// SSAI plugin uses networkCode to generate VOD pod serving request
// When DAI stream is initialized, SSAI plugin gets stream ID from IMA DAI SDK
// Stream ID is then passed as argument to requestStreamUrl function

var player = flowplayer('#container', {
  src: [{
    requestStreamUrl: (streamManager, streamId) => {
      // Add your code to get stream URL from your VTP
    },
    networkCode: "51636543",
    type: "google/dai",
    backupStream: "http://storage.googleapis.com/testtopbox-public/video_content/bbb/master.m3u8"
  }]
});

DAI live stream parameters

These properties can be used when configuring the player with a DAI live stream request.

Example

The following examples demonstrate how to incorporate a request for live stream assets using the DAI full-service and pod-serving solutions. Switch between the Live full service and Live pod serving tabs to see code snippets for using the player in each scenario. Aside fom the type property, values in these examples are placeholders and must be replaced with your own.

var player = flowplayer('#container', {
  src: [{
    assetKey: "c-rArva4ShKVIAkNfy6HUQ",
    type: "google/dai",
    backupStream: "http://storage.googleapis.com/testtopbox-public/video_content/bbb/master.m3u8"
  }]
});

var player = flowplayer('#container', {
  src: [{
    customAssetKey: "google-sample",
    streamUrl: "https://encodersim.sandbox.google.com/masterPlaylist/9c654d63-5373-4673-8c8d-6d92b66b9d46...&stream_id=[[STREAMID]]",
    networkCode: "51636543",
    type: "google/dai",
    backupStream: "http://storage.googleapis.com/testtopbox-public/video_content/bbb/master.m3u8"
  }]
});

Configure the plugin with Yospace

You can configure the SSAI plugin to use with Yospace's DAI for live and VOD content. The following table outlines SSAI plugin configuration properties available for use with Yospace. The SSAI plugin is configured under the src namespace.

Example

In the following example, replace the src value with your own Yospace stream.

var player = flowplayer('#container', {
  src: [{
    type: "yospace",
    src: "https://csm-e-sdk-validation.bln1.yospace.com/csm/access/12345/c2FtcGxlL21hc3Rl?yo.av=3"
  }]
});

Listen to plugin events

To listen to events for this plugin, use the ssai namespace in the player instance. For example, use flowplayer.ssai.events to capture an event. The following table describes the object path and events for the SSAI plugin.

For example, use the following code to set up an event listener capturing when a server-side ad is paused. Then add your custom logic inside the callback function:

player.on(flowplayer.ssai.events.SSAI_AD_PAUSED, (event)=>{
  // Add your code here
  console.log('Server-side ad paused.');
});