MediaMelon SDK integration with HLS js (v0.7.11) Web Player

This guide is for integrating the MediaMelon Player SDK with Nowtilus SSAI for the Javascript based HLS js Web

Step 1: Add the MediaMelon SDK

Add the following lines to the web page before Player files are loaded

<script type="text/javascript" src="https://PATH_TO_MEDIAMELON_SDK/mmNowtilusSSAI_SDK.min.js"></script>
<script type="text/javascript" src="https://PATH_TO_MEDIAMELON_SDK/mmsmartstreaming_hlsjsplayer.js"></script>

Step 2: Initialize the MediaMelon SDK for SSAI

After the player instance has been created, create a new Plugin objects as shown below:

var mmhlsjsPlugin = new HLSJSMMSSIntgr();
var NowtilusAdPlugin = new mmNowtilusSSAIPlugin(<PLAYER_OBJECT>);

Step 3: Providing Macro Substitution Data and the Nowtilus Configuration

Provide the Macro Substitution Data and Nowtilus Configuration as shown below in html/js while setting source information.

let macroJsonObject = {
            "lt": 0,
            "LIMITADTRACKING": 0,
            "ADTYPE": "video",
            "ifa": "681a8ba7-39f5-46d9-9a5a-c006b8fbb7d8",
            "av": "1.12.3",
            "bz": "video",
            "ccb": "9281c15a",
            "CACHEBUSTING": "9281c15a",
            "ap": "1",
            "seq": 1,
            "trq": "1645614813154",
            "TIMESTAMP": "2022-02-23T16:43:33.154+0530",
            "br": "OPPO",
            "lc": "eng_US",
            "mn": "CPH2127",
            "osv": "11",
            "dt": "1",
            "cmd": {
                "md_dvb": "OPPO",
                "md_dvm": "CPH2127",
                "md_osv": "11",
                "md_hr": "16",
                "md_min": "43",
                "md_nt": "1"
            },
            "os": 1,
            "ai": "com.qa1.test",
            "APPBUNDLE": "com.qa1.test",
            "sh": "1440",
            "sw": "720",
            "ua": "Mozilla/5.0 (Linux; Android 11; CPH2127 Build/RKQ1.201217.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/98.0.4758.101 Mobile Safari/537.36",
            "DEVICEUA": "Mozilla/5.0 (Linux; Android 11; CPH2127 Build/RKQ1.201217.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/98.0.4758.101 Mobile Safari/537.36",
            "vr": "AN-1.12.4"
}

//set-up the Nowtilus Config
var nowtilusConfig = {
              isLive : true,             // true for Live, false for others
              streamType: 'hls',         // always hls
              apiKey : "apiKey",         // leave as it is if you dont use api-key
              url : mediaURL,            // the mediaURL/streamURL
              context : 'web',           // leave it as 'web'
              ifa : 'ifa',               // leave it as 'ifa'
              enablePolling : false      // set to true if you want polling for manifest/vast, else set it to false
            };

Step 4: Listen to Ad Callback Events for Disabling Player Controls

Listen to the Ad callbacks provided by MediaMelon SDK for disabling the player controls during the Ad playback and can be enabled back when the Ad playback ends.

NowtilusAdPlugin.addListener('onCueTimelineAdded', function (adinfo, adTimeline) {
        // adTimeline is an Array of adinfo objects. This contains details of all the Ads from upcoming Ad break.
        console.log("onCueTimelineAdded callback");
  });
NowtilusAdPlugin.addListener('onCueTimelineEnter', function (adinfo) {
        console.log("onCueTimelineEnter callback");
});
NowtilusAdPlugin.addListener('impression', function (adinfo) {
        console.log("AD Impression callback");
});
NowtilusAdPlugin.addListener('start', function (adinfo) {
        console.log("AD start callback");
});
NowtilusAdPlugin.addListener('firstQuartile', function (adinfo) {
        console.log("AD FirstQuartile callback");
});
NowtilusAdPlugin.addListener('midpoint', function (adinfo) {
        console.log("AD Midpoint callback");
});
NowtilusAdPlugin.addListener('thirdQuartile', function (adinfo) {
        console.log("AD ThirdQuartile callback");
});
NowtilusAdPlugin.addListener('complete', function (adinfo) {
        console.log("AD Complete callback");
});
NowtilusAdPlugin.addListener('onCueTimelineExit', function (adinfo) {
        console.log("onCueTimelineExit callback");
});

Step 5: Finish setting up the MediaMelon SDK

Initialize the SSAI plugin, attach the SSAI plugin to the SSAI Ad Manager. Setup the SSAI Ad Manager with Media , VAST, vodTimeline data and configuration parameters. And send the Macro Substitution data to the SSAI Ad Manager as shown below:

NowtilusAdPlugin.setup(<MEDIA_URL>, <VAST_URL>, <VOD_TIMELINE_ARRAY>, nowtilusConfig); //VOD_TIMELINE_ARRAY shoulb be an empty array for live streams
NowtilusAdPlugin.setMacroSubstitution(macroJsonObject);
mmhlsjsPlugin.initialize(<PLAYER_OBJECT>, NowtilusAdPlugin);

Get Ad Related Information

You can use the below commands from inside any of the AD Events that you subscribe to. ( Here in the below commands "adInfo" refers to the Ad Object that you receive in the Ad Event Listeners )

Property	Description
adinfo.totalAds	Returns an Integer value which signifies the number of Ads in the current Ad break.
adinfo.clickTrackingURLs	Returns the click tracking URLs as a list.
adinfo.clickThroughURLs	Returns the clickthrough URLs as a list.
adinfo.offset	Returns the Ad offset in seconds.
adinfo.impressionURLs	Returns the Ad Impression Tracking URLs as a list.
adinfo.startURLs	Returns the Ad Start Tracking URLs as a list.
adinfo.firstQuartileURLs	Returns the Ad FirstQuartile Tracking URLs as a list.
adinfo.midPointURLs	Returns the Ad Midpoint Tracking URLs as a list.
adinfo.thirdQuartileURLs	Returns the Ad ThirdQuartile Tracking URLs as a list.
adinfo.completeURLs	Returns the Ad Complete Tracking URLs as a list.
adinfo.adIndex	Returns the index of the current Ad in the Ad break.