Skip to main content

Getting started with OptiView Ads on Web

This guide will get you started with OptiView Ads in your THEOplayer Web SDK: configure the license, update dependencies and set the source description.

Prerequisites​

  1. You need to have a THEOplayer license which is compatible with OptiView Ads. This can be done through the player portal.

  2. You need a correctly deployed OptiView Ads signaling service.

  3. Your THEOplayer SDK needs to have the theoads feature enabled.

    As of THEOplayer version 8.2.0, this feature is enabled by default in the main theoplayer package so we recommend to use at least this version, preferable the latest available version. You can install this package with the following command:

    npm install theoplayer

Integration​

This guide assumes you know how to set up THEOplayer. For more information regarding this, check out the THEOplayer getting started.

Google DAI library​

Since OptiView Ads integrates with Google DAI Pod Serving, it is required to load the Google DAI script on your page:

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

Player configuration​

To make use of the OptiView Ads integration, first enable the feature in your player configuration:

const player = new THEOplayer.Player(element, {
  libraryLocation: 'YOUR-LIBRARY-LOCATION',
  license: 'YOUR-LICENSE-WITH-OPTIVIEW-ADS',
  ads: {
    theoads: true,
  },
});

Then, specify a source with an OptiView Ads-enabled ad description:

player.source = {
  sources: {
    src: 'PATH-TO-SIGNALING-SERVER/hls/MANIFEST-URI',
    type: 'application/x-mpegurl',
    hlsDateRange: true,
  },
  ads: [
    {
      integration: 'theoads',
      networkCode: 'NETWORK-CODE',
      customAssetKey: 'CUSTOM-ASSET-KEY',
    },
  ],
};
  • Notice that the src is different as usual. For OptiView Ads, a signaling server needs to be set up which acts as a proxy to parse the given manifest and insert the ad interstitials. More information can be found here.
  • The hlsDateRange flag needs to be set to true as the ad markers are done using EXT-X-DATERANGE tags.
  • The ads object needs to have its integration set to theoads. Furthermore, the networkCode and customAssetKey needs to be set according to your configured Google account.

Integrating with Open Video UI​

OptiView Ads works seamlessly together with Open Video UI for Web. You can pass your OptiView Ads-enabled source directly to the UI's source property:

<theoplayer-default-ui></theoplayer-default-ui>
<script>
  const ui = document.querySelector('theoplayer-default-ui');
  ui.configuration = {
    libraryLocation: 'YOUR-LIBRARY-LOCATION',
    license: 'YOUR-LICENSE-WITH-OPTIVIEW-ADS',
    ads: {
      theoads: true,
    },
  };
  ui.source = {
    sources: {
      src: 'PATH-TO-SIGNALING-SERVER/hls/MANIFEST-URI',
      type: 'application/x-mpegurl',
      hlsDateRange: true,
    },
    ads: [
      {
        integration: 'theoads',
        networkCode: 'NETWORK-CODE',
        customAssetKey: 'CUSTOM-ASSET-KEY',
      },
    ],
  };
</script>

It should look something like this:

Screenshot of Open Video UI playing a OptiView Ads stream

More information​