Google DAI is a Server-Side Ad-Insertion solution offered by Goggle where THEOplayer is pre-integrated and offers playback for HLS and DASH Streams. A demo can be found at https://demo.theoplayer.com/google-dai.
Web SDK | Android SDK | iOS SDK | tvOS SDK | Android TV SDK | Chromecast SDK |
---|---|---|---|---|---|
Yes | Yes | Yes | Unverified | Unverified | Yes |
The first thing you need is a valid THEOplayer set-up. 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:
A basic HTML page with a working THEOplayer could like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>THEOplayer 3.X: 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>
Pretty self-explanatory, isn't it?
<link rel="stylesheet" type="text/css" href='/path/to/ui.css'>
<script type='text/javascript'src='/path/to/THEOplayer.js'></script>
The two snippets above are the references to the JS and CSS library.
<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>
The snippet above is your HTML container.
<script>
var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element);
player.source = {
sources : [{
src : 'your.mpd',
type : 'application/dash+xml'
}]
};
</script>
The snippet above initializes your player, including a HLS source.
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]
}
};
Add a Google DAI dependancy in the build.gradle file of your project.
//Google Dai library
implementation 'com.google.ads.interactivemedia.v3:interactivemedia:3.19.0'
Add a Google DAI ad configuration to the sources.
//Dash Vod
SourceDescription sourceVod = sourceDescription(
daiTypedSource(
new GoogleDaiVodConfiguration.Builder("api_key", "content_source_id", "video_id").build()
).type(SourceType.DASH).build()
).build();
//HLS Vod
SourceDescription sourceVod = sourceDescription(
daiTypedSource(
new GoogleDaiVodConfiguration.Builder("api_key", "content_source_id", "video_id").build()
).type(SourceType.HLS).build()
).build();
//HLS Live
SourceDescription sourceLive = sourceDescription(
daiTypedSource(
new GoogleDaiLiveConfiguration.Builder("api_key", "asset_key").build()
).type(SourceType.HLS).build()
).build();
//DASH Live
SourceDescription sourceLive = sourceDescription(
daiTypedSource(
new GoogleDaiLiveConfiguration.Builder("api_key", "asset_key").build()
).type(SourceType.DASH).build()
).build();
// Configuring THEOplayer with defined SourceDescription object.
theoPlayer.setSource(sourceVod); //VOD Source
//theoPlayer.setSource(sourceLive); //Live Source
Add a Google-dai (Interactive Media Ads SDK) framework to your project.
Step 1. Download Google-dai (Interactive Media Ads SDK) framework
Step 2. Check How to Configure Framework Section to add Googel-dai Framework
Add a Google DAI ad configuration to the sources.
//Google DAI HLS VOD Stream
private var GoogleDAIVOD: SourceDescription {
let daiConfig = GoogleDAIVodConfiguration(videoID: "tears-of-steel", contentSourceID: "19463", apiKey: "", authToken: nil, streamActivityMonitorID: nil, adTagParameters: nil)
let typedSource = GoogleDAITypedSource(ssai: daiConfig)
return SourceDescription(source: typedSource)
}
//Google DAI HLS VOD Stream
private var GoogleDAILIVE: SourceDescription {
let daiConfig = GoogleDAILiveConfiguration(assetKey: "sN_IYUG8STe1ZzhIIE_ksA", apiKey: "", authToken: nil, streamActivityMonitorID: nil, adTagParameters: nil)
let typedSource = GoogleDAITypedSource(ssai: daiConfig)
return SourceDescription(source: typedSource)
}
// Configure the player's source to initilaise playback
theoplayer.source = GoogleDAIVOD //VOD Source
theoplayer.source = GoogleDAILIVE //Live Source
THEOplayer SDK and Google-DAI are fully pre-integrate to deliver Server-Side Ad Insertion solution, allowing customers to play streams in a breeze.
Extra resources:
Related articles