Skip to main content
Version: 11.7.0

Google Dynamic Ad Insertion (DAI) on Web

Google Dynamic Ad Insertion (DAI) is a Server-Side Ad-Insertion solution offered by Google where THEOplayer offers playback for HLS and DASH streams.

A demo can be found at https://demo.theoplayer.com/google-dai.

Prerequisites​

  1. Your THEOplayer SDK needs to have the google-dai module enabled.
  2. You need to include the Google DAI JavaScript SDK as this is a dependency.

Starting Template​

The first thing you need is a valid THEOplayer setup. If you have no experience with setting up our player, we have an excellent getting started guide.

To get THEOplayer to work, you only need to do three things:

  1. Reference the THEOplayer JavaScript library (and optionally the default CSS styles).
  2. Add a container which can hold your video player with HTML.
  3. Create your player through JavaScript using our API.

A basic HTML page with a working THEOplayer could like the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>THEOplayer Web SDK: Getting Started</title>
        <metaname="viewport"content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href='/path/to/ui.css'><!-- ads THEOplayer CSS -->
    </head>
    <body>

        <div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

        <script type='text/javascript' src='/path/to/THEOplayer.js'></script><!-- ads THEOplayer library -->
        <script>

            var element = document.querySelector('.theoplayer-container');
            var player = new THEOplayer.Player(element);

            player.source = {
                sources : [{
                    src : 'your.m3u8',
                    type : 'application/x-mpegurl'
                }]
            };

        </script>
    </body>
</html>

Integrating Google DAI​

Add a Google DAI JavaScript library.

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

Add a Google DAI ad configuration to the sources.

const TYPES = {
  hls: 'application/vnd.apple.mpegurl',
  dash: 'application/dash+xml',
};

// example and reference tester at https://developers.google.com/interactive-media-ads/docs/sdks/html5/dai/vastinspector
const SOURCES = {
  dash: {
    vod: {
      integration: 'google-dai',
      availabilityType: 'vod',
      apiKey: null,
      contentSourceID: '<contentSourceID>',
      videoID: '<videoID>',
    },
    live: {
      integration: 'google-dai',
      availabilityType: 'live',
      apiKey: null,
      assetKey: '<assetKey>',
    },
  },
  hls: {
    vod: {
      integration: 'google-dai',
      availabilityType: 'vod',
      apiKey: null,
      contentSourceID: '<contentSourceID>',
      videoID: '<videoID>',
    },
    live: {
      integration: 'google-dai',
      availabilityType: 'live',
      apiKey: null,
      assetKey: '<assetKey>',
    },
  },
};
// Configure THEOplayer Source
const MANIFEST_TYPE = 'hls'; // 'hls' / 'dash'
const AVAILABILITY_TYPE = 'vod'; // 'vod' or 'live'

player.source = {
  sources: {
    type: TYPES[MANIFEST_TYPE],
    ssai: SOURCES[MANIFEST_TYPE][AVAILABILITY_TYPE],
  },
};

Resources​