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.