This guide demonstrates how to use the IMA DAI SDK for HTML5 to request and play a Google Cloud VOD stream session.
This guide expands on the basic example from the Get started guide for IMA DAI.
For information on integrating with other platforms or on using the IMA client-side SDKs, see Interactive Media Ads SDKs.
Set up a Google Cloud project
Set up a Google Cloud project and configure service accounts to access the project.
Enter the following variables for use in the IMA SDK:
- Location
- The Google Cloud region
where your VOD config was created:
your-location - Project number
- The Google Cloud project number using the Video Stitcher API:
your-project-number - OAuth token
A service account's short lived OAuth token with the Video Stitcher user role:
your-oauth-token
Read more about creating short-lived OAuth tokens. The OAuth token can be reused across multiple requests as long as it has not expired.
- Network code
The Ad Manager network code for requesting ads:
your-network-code
- Ad tag URL
Ad Manager URL of the ad tag:
your-ad-tag-url
For testing, you can use the IMA VMAP Pre-roll sample.
- Content source URL
The URL string of the stream manifest for your VOD content:
your-content-source-url
Host the HLS example
Download the IMA DAI examples for
HTML5 and extract the
hls_js/simple sample .zip file into a new folder. This example is a web
app that you can host locally for testing purposes.
To host the example locally, navigate to the new folder, and run the following python command to start a web server:
python3 -m http.server 8000
http.server is only available in Python 3.x. You can use any other web server,
such as the Apache HTTP Server or Node JS.
Open a web browser and navigate to localhost:8000 to see a video player.
If everything is working properly, clicking the play button on the video player begins the short film "Tears of Steel", with ad breaks every 30 seconds.
Request a VOD stream
To replace the sample stream with your ad stitched VOD stream, use the
VideoStitcherVodStreamRequest
class to automatically create an ad session with Google Ad Manager. You can use
the Google Ad Manager UI to
locate the generated DAI sessions
for monitoring and debugging.
In the existing sample, there are functions for requesting a VOD stream or a
live stream. To make it work with Google Cloud Video Stitcher API, you need to
add a new function to return a
VideoStitcherVodStreamRequest
object.
Here's an example:
...
// StreamManager which will be used to request DAI streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
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);
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);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = "block";
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVodVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
streamRequest.contentSourceUrl = 'your-content-source-url';
streamRequest.adTagUrl = 'your-ad-tag-url';
streamRequest.region = 'your-location';
streamRequest.projectNumber = 'your-project-number';
streamRequest.oAuthToken = 'your-oauth-token';
streamRequest.networkCode = 'your-network-code';
streamManager.requestStream(streamRequest);
}
...
Reload the page. Then, you can request and play the custom VOD stream.
Clean up
Now that you have successfully hosted a VOD stream using the Google Cloud Video Stitcher API and requested it using the IMA DAI SDK for HTML5, it's important to clean up any serving resources.
Follow the VOD clean up guide to remove any unneeded resources and assets.
Finally, in the terminal window where you started the Python 3 web server, use
the command ctrl+C to end the local server.