Advertisement with HLS interstitials (SSAI)

Introduction

HLS Interstitials allow you to do more than HLS discontinuity: return to live before the end, playback obligation, smoother transitions. With HLS interstitials, it's possible to have a playback session, so the user doesn't see the same ad at every break.

We support HLS interstitials with hls.js through #EXT-X-DATERANGE:<attribute-list> Metadata: HLS EXT-X-DATERANGE Schema for Interstitials including the following attributes

• CLASS
• X-ASSET-URI
• X-ASSET-LIST
• X-RESUME-OFFSET
• X-SNAP
• X-PLAYOUT-LIMIT
• X-RESTRICT

Player code example

<script src="https://cdn.radiantmediatechs.com/rmp/10.7.0/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>

  // HLS interstitials demo stream
  const src = {
    hls: 'https://storage.googleapis.com/shaka-demo-assets/hls-interstitials/interstitial.m3u8'
  };
  const settings = {
    licenseKey: 'your-license-key',
    src,
    width: 640,
    height: 360,
    autoplay: true,
    // Show/hide Advertisement UI when an asset starts/ends
    interstitialShowAdUI: true,
    // Make sure this also works on Apple devices
    forceMseHlsOnAppleDevices: true,
    // Those settings also work with HLS interstitials
    adShowRemainingTime: true,
    adCountDown: true,
    contentMetadata: {
      poster: [
        'https://your-poster-image.jpg'
      ]
    }
  };

  const rmp = new RadiantMP('rmp');

  // Initialization ... and done!
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
      rmp.on('interstitialsupdated', (event) => {
        console.log(event.type);
        console.log(event.data);
      });
      rmp.on('interstitialstarted', () => {
        console.log('interstitialstarted');
      });
      rmp.on('interstitialended', () => {
        console.log('interstitialended');
      });
      rmp.on('interstitialassetstarted', (event) => {
        console.log(event.type);
        console.log(event.data);
      });
      rmp.on('interstitialassetended', (event) => {
        console.log(event.type);
        console.log(event.data);
      });
      rmp.on('interstitialasseterror', (event) => {
        console.log(event.type);
        console.log(event.data);
      });
      rmp.on('warning', () => {
        console.log('non-fatal error detected');
        console.log(rmp.warningData);
      });
    } catch(error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();

</script>

Player settings

interstitialShowAdUI: Boolean

When an asset starts within an HLS interstitial break show/hide the advertisement UI automatically. If set to false the viewer will be able to navigate through the interstitial with seekbar or player modules. Default: true.

API events

interstitialsupdated

Fires following playlist parsing with Interstitial EXT-X-DATERANGE tags and any changes to interstitial asset duration or scheduling. It includes the list of interstitial events, the scheduled playback segments, the durations for the schedule for any chosen timeline, and any removed Interstitial EXT-X-DATERANGE since the last update (Live only).

interface InterstitialsUpdatedData {
  events: InterstitialEvent[];
  schedule: InterstitialScheduleItem[];
  durations: InterstitialScheduleDurations;
  removedIds: string[];
}

interstitialstarted

Fires when entering a scheduled interstitial event item. These events fire whenever playing or seeking into an Interstitial DATERANGE.

interstitialended

Fires when exiting a scheduled interstitial event item. These events fire whenever playing or seeking out-of an Interstitial DATERANGE.

interstitialassetstarted

Fires when entering a scheduled interstitial event item. These events fire whenever playing or seeking into an Interstitial DATERANGE. It includes event data:

interface InterstitialAssetStartedData {
  asset: InterstitialAssetItem;
  assetListIndex: number;
  event: InterstitialEvent;
  schedule: InterstitialScheduleItem[];
  scheduleIndex: number;
  player: HlsAssetPlayer;
}

interstitialassetended

Fires when exiting a scheduled interstitial event item. These events fire whenever playing or seeking out-of an Interstitial DATERANGE. It includes event data:

interface InterstitialAssetEndedData {
  asset: InterstitialAssetItem;
  assetListIndex: number;
  event: InterstitialEvent;
  schedule: InterstitialScheduleItem[];
  scheduleIndex: number;
  player: HlsAssetPlayer;
}

interstitialasseterror

Fires when an error results in an asset not playing or finishing early. Playback is expected to fallback to primary. A 2001 warning should also fire. It includes event data:

type InterstitialAssetErrorData = {
  asset: InterstitialAssetItem | null;
  assetListIndex: number;
  event: InterstitialEvent | null;
  schedule: InterstitialScheduleItem[] | null;
  scheduleIndex: number;
  player: HlsAssetPlayer | null;
}