DAI - Google Dynamic Ad Insertion

Dynamic Ad Insertion (DAI) is a server-side video ad technology that enables you to serve video ads into a live stream or VOD. Serving ads without the need to reload video allows for maximum smooth playback and the most enjoyable viewing experience. Adblockers are unable to block just the ads but the whole content instead. If viewers want to enjoy the content, they will have to disable their ad blocker.
The latest version of the IMA Plugin for Video.js includes support for DAI ads.

The example above demonstrates a VOD stream with DAI integration for server-side ad insertion using a videojs player with the Nuevo and Ima plugins.

Code snippet

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="/video-js/video.min.js"></script>
<script src="/video-js/nuevo.min.js"></script>
<script src="/videojs/plugins/videojs-contrib-ads.js"></script>
<script src="//domain.com/video-js/videojs.dai.js"></script>

<video id="myplayer" class="video-js" poster="//domain.com/path/to/poster.jpg" controls preload="auto">
</video>

<script>
player = videojs('video_player', videoOptions);
player.nuevo(nuevoOptions);

var stream = new window.videojsIma.VodStream("hls", "2528370", "tears-of-steel" );
var imaOptions = { 
	fallbackStreamUrl: 'http://storage.googleapis.com/testtopbox-public/video_content/bbb/master.m3u8',
	// Include other IMA DAI options as needed.
}
player.imaDai(vodStream, imaOptions);
</script>

The code example above refers to the VOD stream type. Below, you can see the declaration for the live stream.

Code snippet

var stream = new window.videojsIma.LiveStream("hls", "sN_IYUG8STe1ZzhIIE_ksA" );

When using NPM imports, you can install and import both videojs-contrib-ads and videojs-ima from the NPM registry.

Code snippet

npm install videojs-contrib-ads
npm install videojs-ima

ES6 Imports

Code snippet

import videojs from 'video.js';
import "./videojs/plugins/es/nuevo";
import 'videojs-contrib-hls';
import 'videojs-ima';
import {VodStream, LiveStream} from 'videojs-ima';

const videoOptions = {
  controls: true,
  // Include other video.js options as needed.
};
const player = videojs('video_player', videoOptions);

const nuevoOptions = {
  contextMenu: false,
  // Include other Nuevo options as needed.
};
player.nuevo();

// Example of a VOD stream using IMA's sample stream.
const vodStream = new VodStream('hls', '2528370', 'tears-of-steel');

// Example of a Live stream using IMA's sample stream.
const liveStream = new LiveStream('hls', 'sN_IYUG8STe1ZzhIIE_ksA');

const imaOptions = {
  fallbackStreamUrl: 'http://storage.googleapis.com/testtopbox-public/video_content/bbb/master.m3u8',
  // Include other IMA DAI options as needed.
};

player.imaDai(vodStream, imaOptions);

For more details about DAI integration and the plugin's DAI options, check Github's Googleads source.

You need to have Google's Ad Manager 360 Advanced contract. Enabling Google DAI playback is a technical process, we strongly advise working with a developer to enable Google DAI playback for your web player.