Get started using JWPlayer

Stay organized with collections Save and categorize content based on your preferences.

This guide details the steps necessary to play dynamic-ad-insertion (DAI) streams with the IMA SDK using JWPlayer. To follow along with a finished sample, download our BasicExample.

Create the HTML

Create a file called dai.html containing the following:

<html>
  <head>
    <script src="//content.jwplatform.com/libraries/gVFmc0KC.js"></script>
    <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
    <script src="dai.js"></script>
    <link rel="stylesheet" href="dai.css" type="text/css">
  </head>
  <body onLoad="initPlayer()">
    <h2>IMA SDK DAI Demo (JWPlayer)</h2>
    <div id="video">
      <div id="player"></div>
    </div>
  </body>
</html>

The <script> tags in this code add library references for JWPlayer and the IMA DAI SDK. The <div> tags in the body of the HTML document set up your video player. Calling initPlayer() in the onLoad function initializes that video player.

Create the JavaScript

Create a JavaScript file called dai.js to hold the player logic for your HTML page.

Initialize the video player

First, add the following to dai.js to address the initPlayer() call you made in dai.html.

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8';

// Live stream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2528370";
var TEST_VIDEO_ID = "tears-of-steel";

var isAdBreak;

function initPlayer() {
  jwplayer('player').setup({
    'file': BACKUP_STREAM,
    'primary': 'html5',
    'width': 640,
    'height': 360,
    'hlshtml': true,
    'hlsjsdefault': true
  });
  // Turn off controls until stream finishes loading.
  jwplayer().setControls(false);
  jwplayer().on('ready', function(e) {
    initStreamManager();
    requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  });
}

This code first creates a backup stream to initialize the video player. Under normal circumstances, the backup stream is not played, but it must be valid to properly initialize the video player. Next, call the player's setup() method, passing in the "player" <div> that you created in dai.html.

Next, define an anonymous function to handle the ready event. The ready event handler initializes the SDK's StreamManager and requests a video-on-demand (VOD) stream. Both of these tasks are accomplished via helper functions detailed below.

Initialize the StreamManager

To set up the StreamManager, add the following code to dai.js:

function initStreamManager() {
  var videoElement = jwplayer().getContainer().querySelector('video');
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);
  streamManager = new google.ima.dai.api.StreamManager(videoElement);
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
  // Add metadata listener. Only used in live streams.
  jwplayer().on('meta', function(e) {
    if (streamManager && e.metadata) {
      streamManager.onTimedMetadata(e.metadata);
    }
  });
}

Request the stream

Now add the requestVODStream() function to handle VOD streams. Then add a similar function to request live streams:

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey || '';
  streamManager.requestStream(streamRequest);
}

These functions create new StreamRequest objects (either live or VOD), fill in the appropriate fields, and then request the stream.

Handle stream events

Earlier, you hooked all of your event handlers to the onStreamEvent() function. Implement it by adding the following to dai.js.

function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(e.getStreamData());
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.');
      jwplayer().setControls(true);
      jwplayer().load([{'file': BACKUP_STREAM}]);
      jwplayer().play();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      jwplayer().setControls(false);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      jwplayer().setControls(true);
      break;
    default:
      break;
  }
}

You will also need to handle the play and pause events from your video element.

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    jwplayer().setControls(true);
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    jwplayer().setControls(false);
  }
}

Here, the function handles loading, errors, and enabling/disabling the player controls, which is required by the SDK. When the stream is loaded, the video player is instructed to load and play the provided URL in the loadStream() function, so add that in:

function loadStream(data) {
  var url = data['url'];
  jwplayer().load([{'file': url}]);
  jwplayer().setControls(true);
}

That's it. You now have a working IMA DAI implementation for HTML5.