Select platform: [HTML5](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/html5/get-started/full-service.md.txt "View this page for the HTML5 platform docs.") [Android](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/android/get-started/full-service.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/ios/get-started/full-service.md.txt "View this page for the iOS platform docs.") [tvOS](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/tvos/get-started/full-service.md.txt "View this page for the tvOS platform docs.") [Cast](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/cast/get-started/full-service.md.txt "View this page for the Cast platform docs.") [Roku](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/roku/get-started/full-service.md.txt "View this page for the Roku platform docs.")

<br />

This guide demonstrates how to integrate the IMA DAI SDK into a video
player app. If you would like to view or follow along with a completed sample
integration, download the
[simple example](https://github.com/googleads/googleads-ima-html5-dai) from GitHub.


**Note:** The IMA DAI SDK for HTML5 supports both HLS and DASH streams, but playing each requires a different media player or extension like [HLS.js](https://github.com/video-dev/hls.js/) or [DASH.js](https://github.com/Dash-Industry-Forum/dash.js/), with varying implementations.


This guide explains how to configure HLS.js and IMA DAI SDK to play an HLS stream, with
important notes about implementation differences for DASH.


See the [IMA
DASH.js sample app](https://github.com/googleads/googleads-ima-html5-dai/tree/main/dash_js/simple) for a starting point to implement DASH DAI streams with IMA.

<br />


> [!IMPORTANT]
> To use IMA DAI, you must have an [Ad Manager 360 Advanced](https://support.google.com/admanager/answer/3485387) account. If you have an Ad Manager account, contact your account manager for more details. For information about signing up for Ad Manager, visit the [Ad Manager Help Center](https://support.google.com/admanager/answer/7084151).

<br />


**Note:** For information on integrating with other platforms, or on using the IMA client-side SDKs, see [Interactive Media Ads SDKs](https://developers.google.com/interactive-media-ads).

<br />

## IMA DAI overview

Implementing the IMA DAI SDK involves two main components as demonstrated in
this guide:

- `

  StreamRequest`--- either a `

  VODStreamRequest` or a `

  LiveStreamRequest`: An object that defines a stream request. Stream requests can either be for video-on-demand or live streams. Live stream requests specify an asset key, while VOD requests specify a CMS ID and video ID. Both request types can optionally include an API key needed to access specified streams, and a Google Ad Manager network code for the IMA SDK to handle ads identifiers as specified in Google Ad Manager settings.
- `
  StreamManager`: An object that handles dynamic ad insertion streams and interactions with the DAI backend. The stream manager also handles tracking pings and forwards stream and ad events to the publisher.

## Prerequisites

- Three empty files
  - **dai.html**
  - **dai.css**
  - **dai.js**
- Python installed on your computer, or a web server to use for testing

## Start a development server

Since the IMA DAI SDK loads dependencies using the same protocol as the page
from which it's loaded, you need to use a web server to test your app. A
quick way to start a local development server is to use Python's built-in
server.

1. Using a command line, from the directory that contains your `index.html` file
   run:

   ```bash
   python -m http.server 8000
   ```

   > [!NOTE]
   > **Note:** `http.server` is only available in Python 3.x.

2. In a web browser, go to to `http://localhost:8000/`

   You can also use any other web server, such as the [Apache HTTP
   Server](https://httpd.apache.org/).

## Create a video player

First, modify **dai.html** to create a HTML5 video element and a div to
use for the clickthrough. The following example imports the IMA DAI SDK. For
more details, see
[Import the IMA DAI SDK](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/html5/get-started.md.txt?service=full#load_the_ima_dai_sdk).

Also, add the necessary tags to load the `dai.css`
and `dai.js` files, as well as to import the `hls.js` video player. Then,
modify `dai.css` to specify the size and position of the page elements.
Finally, in `dai.js`, define variables to hold the stream request
information, an `initPlayer()` function to run when the page loads, and set up
the play button to request a stream on click.

```html
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
  <video id="video"></video>
  <div id="adUi"></div>
  <button id="play-button">Play</button>
</body>
</html>

```

```css
#video,
#adUi {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#adUi {
  cursor: pointer;
}

#play-button {
  position: absolute;
  top: 400px;
  left: 15px;
}
```

```javascript
// This stream will be played if ad-enabled playback fails.
const BACKUP_STREAM =
    'http://storage.googleapis.com/testtopbox-public/video_content/bbb/' +
    'master.m3u8';

// Live stream asset key.
// const TEST_ASSET_KEY = 'c-rArva4ShKVIAkNfy6HUQ';

// VOD content source and video IDs.
const TEST_CONTENT_SOURCE_ID = '2548831';
const TEST_VIDEO_ID = 'tears-of-steel';

// Ad Manager network code.
const NETWORK_CODE = '21775744923';
const API_KEY = null;

// StreamManager which will be used to request ad-enabled streams.
let streamManager;

// hls.js video player
const hls = new Hls();

// Video element
let videoElement;

// Ad UI element
let adUiElement;

// The play/resume button
let playButton;

// Whether the stream is currently in an ad break.
let adBreak = false;

/**
 * Initializes the video player.
 */
function initPlayer() {
  videoElement = document.getElementById('video');
  playButton = document.getElementById('play-button');
  adUiElement = document.getElementById('adUi');
  createStreamManager();
  listenForMetadata();

  // Show the video controls when the video is paused during an ad break,
  // and hide them when ad playback resumes.
  videoElement.addEventListener('pause', () => {
    if (adBreak) {
      showVideoControls();
    }
  });
  videoElement.addEventListener('play', () => {
    if (adBreak) {
      hideVideoControls();
    }
  });

  playButton.addEventListener('click', () => {
    console.log('initiatePlayback');
    requestStream();
    // Hide this play button after the first click to request the stream.
    playButton.style.display = 'none';
  });
}
```

To resume playback during paused ad breaks, set up event listeners for the video
element's `pause` and `start` events to show and hide player controls.

```javascript
/**
 * Hides the video controls.
 */
function hideVideoControls() {
  videoElement.controls = false;
  adUiElement.style.display = 'block';
}

/**
 * Shows the video controls.
 */
function showVideoControls() {
  videoElement.controls = true;
  adUiElement.style.display = 'none';
}
```

## Load the IMA DAI SDK

Next, add the IMA framework using a script tag in **dai.html** , before the tag
for **dai.js**.

> [!NOTE]
> **Note:** To receive verbose console logs, you can replace `ima3_dai.js` with `ima3_dai_debug.js`. However, `ima3_dai_debug.js` shouldn't be used in production apps.

```html
<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
```

## Initialize the StreamManager

In order to request a set of ads, create an `ima.dai.api.StreamManager`, which
is responsible for requesting and managing DAI streams. The constructor takes a
video element and an ad UI element to handle ad clicks.

```javascript
/**
 * Create the StreamManager and listen to stream events.
 */
function createStreamManager() {
  streamManager =
      new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.LOADED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.ERROR, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED, onStreamEvent);
}
```

## Make a stream request

Define functions to request streams. This example includes functions for
both VOD and livestreams, which create instances of the `VODStreamRequest`
class and the `LiveStreamRequest` class. After you have your `streamRequest` instance, call the
`streamManager.requestStream()` method with the stream request instance.

```javascript
/**
 * Makes a stream request and plays the stream.
 */
function requestStream() {
  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, NETWORK_CODE, API_KEY);
  // Uncomment line below and comment one above to request a LIVE stream.
  // requestLiveStream(TEST_ASSET_KEY, NETWORK_CODE, API_KEY);
}

/**
 * Requests a Live stream with ads.
 * @param {string} assetKey
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestLiveStream(assetKey, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

/**
 * Requests a VOD stream with ads.
 * @param {string} cmsId
 * @param {string} videoId
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestVODStream(cmsId, videoId, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}
```

Both stream request methods take an optional API key. If you're using a
protected stream, you need to create a DAI authentication key. For more details,
see
[Authenticate DAI video stream requests](https://support.google.com/admanager/answer/6381445).
Neither stream in this example is protected using a DAI authentication key, so
`apiKey` is not used.

## Parse stream metadata

You also need to add a handler to listen to timed metadata events and forward
the events to the `StreamManager` class for IMA to emit ad events during ad
breaks:

```javascript
/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Timed metadata is handled differently by different video players, and the
  // IMA SDK provides two ways to pass in metadata,
  // StreamManager.processMetadata() and StreamManager.onTimedMetadata().
  //
  // Use StreamManager.onTimedMetadata() if your video player parses
  // the metadata itself.
  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with hls.js.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });
}
```

This guide uses the `hls.js` player for stream playback, but your metadata
implementation depends on the type of player you use.

## Handle stream events

Implement event listeners for major video events. This example handles the
`LOADED`, `ERROR`, `AD_BREAK_STARTED` and `AD_BREAK_ENDED` events by calling
an `onStreamEvent()` function. This function handles stream loading, stream
errors, and disabling the player controls during ad playback, which the IMA SDK
requires.

```javascript
/**
 * Responds to a stream event.
 * @param {!google.ima.dai.api.StreamEvent} e
 */
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      adBreak = true;
      hideVideoControls();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      adBreak = false;
      showVideoControls();
      break;
    default:
      break;
  }
}

/**
 * Loads and plays a Url.
 * @param {string} url
 */
function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}
```

When the stream is loaded, the video player loads and plays the provided URL
using a `loadUrl()` function.

That's it! You're now requesting and displaying ads with the IMA DAI SDK. To
learn about more advanced SDK features, see the other guides or the
[samples on GitHub](https://github.com/googleads/googleads-ima-html5-dai).