> For the complete documentation index, see [llms.txt](https://docs.mediamelon.com/mediamelon-jio-ssai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mediamelon.com/mediamelon-jio-ssai/mediamelon-player-sdk-with-nowtilus-ssai-for-jio-web/mediamelon-sdk-integration-with-hls-js-v0.7.11-web-player.md).

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

### **Step 1: Add** the MediaMelon SDK <a href="#step-1-add-mediamelon-smartstreaming-sdk-hardbreak" id="step-1-add-mediamelon-smartstreaming-sdk-hardbreak"></a>

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

```javascript
<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 <a href="#step-2-register-and-initialize-mediamelon-sdk" id="step-2-register-and-initialize-mediamelon-sdk"></a>

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

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

### Step 3: Providing Macro Substitution Data and  the Nowtilus Configuration <a href="#cl-step-4-providing-content-metadata-and-custom-tags" id="cl-step-4-providing-content-metadata-and-custom-tags"></a>

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

```javascript
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 <a href="#vr-step-5-registering-for-ad-events-for-disabling-player-controls" id="vr-step-5-registering-for-ad-events-for-disabling-player-controls"></a>

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.

```javascript
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  <a href="#vr-step-5-registering-for-ad-events-for-disabling-player-controls" id="vr-step-5-registering-for-ad-events-for-disabling-player-controls"></a>

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:

```javascript
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 lis&#x74;*.*                            |
| `adinfo.thirdQuartileURLs` | Returns the  Ad ThirdQuartile Tracking URLs as a lis&#x74;*.*                       |
| `adinfo.completeURLs`      | Returns the  Ad Complete Tracking URLs as a lis&#x74;*.*                            |
| `adinfo.adIndex`           | Returns the index of the current Ad in the Ad break.                                |