OptiView Ads on Web

This guide configures OptiView Ads in the OptiView Player Web SDK. Version 11.9.x or later is required.

Prerequisites

1. Obtain an OptiView Player license compatible with OptiView Ads from the player portal.

2. Retrieve the Break Manifest URL for your channel. See the Break Manifest endpoint.

3. Install the Web SDK:

   npm install theoplayer

4. For Google Pod Serving, load the Google DAI library:

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

Step 1 — Enable OptiView Ads

Enable theoads in the player configuration:

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

Step 2 — Configure the OptiView Ads source

Set a source that combines your media stream with a theoads ad description:

player.source = {
  sources: {
    src: 'YOUR-STREAM-URL',
    type: 'application/x-mpegurl',
  },
  ads: [
    {
      integration: 'theoads',
      breakManifestUrl: 'https://us.markers.optiview.dolby.com/manifest/v1/ORG-ID/channels/CHANNEL-ID',
      networkCode: 'NETWORK-CODE',
      customAssetKey: 'CUSTOM-ASSET-KEY',
      adTagParameters: { key: 'value' },
    },
  ],
};

The media source itself is not important to OptiView Ads: it only needs to carry timing information (such as EXT-X-PROGRAM-DATE-TIME) that the player can schedule breaks against.

The ad description properties:

• breakManifestUrl — the channel's Break Manifest URL. This is the most important part: it is where the player learns about the channel's breaks.
• networkCode — your Google Ad Manager network code, for Google Pod Serving. See the Google Ad Manager prerequisites.
• customAssetKey — the channel's custom asset key, for Google Pod Serving.
• adTagParameters — player-side ad tag parameters for Google Pod Serving. Use these for values that are only known on the device, such as device identifiers; they override the break's assetParameters on duplicate keys.

Step 3 — Verify playback

Start playback, then schedule a break through the API or dashboard and confirm that the ad plays out.