How to play ads

Client-side advertisement systems

• Google IMA

Server-side advertisement systems

• Google DAI
• MediaTailor

Google IMA

HISPLayer offers support for Google IMA as an ad integration system. Users of Google Ad Manager (formerly known as DoubleClick for Publishers) should use this ad integration.

To use Google IMA:

• It is needed to include the Google IMA SDK
• It is needed to specify adsMode: "ima" in your config

Include the IMA SDK

Google IMA has a dependency on the IMA SDK. Hence, this library needs to be included. The following snippets demonstrates how this SDK can be included.

<script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

Note: it is required to load the IMA library in your page, otherwise, the playback will start without ads.

Specify the integration

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  ads: {
    adsMode: 'ima',
    adTagUri: <YOUR_AD_TAG_URI>,
  },
};

How to set up VAST and VMAP ads

A VAST advertisement is a single ad break, and you can position it as a pre-roll, mid-roll or post-roll.

A VMAP advertisement is a playlist of ad breaks, and can contain any combination of pre-rolls, mid-rolls and/or post-rolls.

Our Google IMA integration supports any VAST or VMAP from any ad system.

Google DAI

Google DAI is a Server-Side Ad-Insertion solution offered by Google where HISPlayer is pre-integrated and offers playback for HLS and DASH Streams.

To use Google DAI:

• It is needed to include the Google DAI SDK
• It is needed to specify adsMode: "dai" in your config

Include the DAI SDK

Google DAI has a dependency on the DAI SDK. Hence, this library needs to be included. The following snippets demonstrates how this SDK can be included.

<script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>

Note: it is required to load the IMA DAI library in your page, otherwise, the playback will start without ads.

Specify the integration

For Live:

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  ads: {
    adsMode: 'dai',
    daiConfig : {
      assetKey: <YOUR_ASSET_KEY>,
    },
  },
};

For VoD:

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  ads: {
    adsMode: 'dai',
    daiConfig : {
      contentSrcId: <YOUR_CONTENT_SRC_ID>,
      videoId: <YOUR_VIDEO_ID>,
    },
  },
};

MediaTailor

MediaTailor is a service that provides scalable ad insertion and channel assembly. It is able to serve targeted ad content to viewers and create linear streams while maintaining broadcast quality in over-the-top (OTT) video applications. It supports HLS and DASH for both VOD and live workflows.

To use MediaTailor:

• It is needed to specify adsMode: "mediatailor" in your config

Specify the integration

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  ads: {
    adsMode: 'mediatailor',
    mediatailorConfig : {
      baseUrl: <YOUR_BASE_URL>,
      manifestUrl: <YOUR_MANIFEST_PATH>,
    },
  },
};

Example of MediaTailor config:

mediatailorConfig : {
  baseUrl: 'https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com',
  manifestUrl: '/v1/session/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8',
}