VideoJS Web with Google DAI
Step 1: Add the MediaMelon Player SDK
Include the following lines to the web page after all video js player and Google IMA SDK files are loaded.
<script type="text/javascript" src="https://PATH_TO_SMARTSTREAMING_SDK"></script>Step 2: Register and Initialize the MediaMelon Player SDK
We integrate the Media Melon SDK in 5 easy steps
Step 2.1 Specify asset information for MM SDK
Step 2.2 Create Video JS Plugin Object
Step 2.3 Register SDK with Mediamelon data platform
Step 2.4 Provide additional player information
Step 2.5 initialize Video JS IMA Plugin
These steps have been annotated in the code below
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>VIDEO JS IMA</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<h1>Video.js IMA Example Embed</h1>
<video id="my_video_1" muted="muted" class="vjs-default-skin" controls preload="auto" width="640" height="268"></video>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-contrib-hlsjs.min.js"></script>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
<script src="mmsmartstreamingsdk_videojs_ima.min.js"></script>
<script>
var player = videojs('my_video_1');
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Live stream asset key.
var TEST_ASSET_KEY = "c-rArva4ShKVIAkNfy6HUQ";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2528370";
var TEST_VIDEO_ID = "tears-of-steel";
var videoElement;
var adUiElement;
var isAdBreak;
var streamManager;
function initPlayer()
{
videoElement = document.querySelector('video');
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);
// Use requestLiveStream(TEST_ASSET_KEY, null) for Live Stream
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
}
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);
}
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
player.textTracks().on('addtrack', function (e) {
// find out if the new track is metadata
var track = e.track;
if (track.kind === 'metadata') {
// a cuechange event fires when the player crosses over an ID3 tag
track.on('cuechange', function () {
let elemTrack = track.activeCues[0];
if (elemTrack && elemTrack.value.data) {
var metadata = {};
metadata[elemTrack.value.key] = elemTrack.value.data;
metadata["duration"] = Infinity;
streamManager.onTimedMetadata(metadata);
}
});
}
});
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started FROM Customer');
isAdBreak = true;
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended FROM Customer');
isAdBreak = false;
break;
default:
break;
}
}
var options = {};
//Step 2.1 Specify asset information for MM SDK
var mmVideoAssetInfo = {
"assetName":"Lucifer",
"assetId": "Lucifer-Netflix",
"videoId": "Lucifer-Netflix_India",
"contentType": "Comedy/Horror",
"genre" : "Comedy",
"title" : "Lucifer-Series",
"drmProtection": "none",
"episodeNumber": "799",
"season":"2",
"seriesTitle": "Lucifer-On-Earth",
"videoType" : "LIVE",
"customTags":{
"Key1": "Value1",
"Key2": "Value2"
}
};
// Initialize Player for Google DAI
initPlayer();
//Step 2.2 Create MM Video JS Plugin Object
var mmvjs7Plugin = new VideoJSMMSSIntgr();
//Step 2.3 Register SDK with Mediamelon data platform
if (mmvjs7Plugin.getRegistrationStatus() === false) {
mmvjs7Plugin.registerMMSmartStreaming("Video JS IMA Player", "CUSTOMER_ID",
"SAMPLE_SUBSCRIBER_ID",
"SAMPLE_DOMAIN_NAME",
"SAMPLE_SUBSCRIBER_TYPE",
"SAMPLE_SUBSCRIBER_TAG");
//Step 2.4 Provide additional player information
mmvjs7Plugin.reportPlayerInfo("videojs-vhs", "vhs", '7');
}
function loadUrl(url) {
console.log('Loading:' + url);
player.src({
src : url,
type: 'application/x-mpegURL',
mmVideoAssetInfo: mmVideoAssetInfo
});
//Step 2.5 initialize Video JS IMA Plugin
mmvjs7Plugin.initialize(player,url, mmVideoAssetInfo,streamManager);
player.play();
}
</script>
</body>
</html>
Last updated
Was this helpful?