# MediaMelon SDK integration with Castlabs js (v6.2)Web Player

### **Step 1: Add** the MediaMelon Player 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 after Castlabs files are loaded

```javascript
<script type="text/javascript" src="https://PATH_TO_SMARTSIGHT_SDK/mmssai-castlabs-a1.min.js"></script>
```

### **Step 2: Register and Initialize** the MediaMelon Player SDK <a href="#step-2-register-and-initialize-mediamelon-sdk" id="step-2-register-and-initialize-mediamelon-sdk"></a>

{% hint style="info" %}
\<customer\_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at [support@mediamelon.com](http://40mediamelon.com/)
{% endhint %}

After the player instance has been created, create a new Plugin object, register, report player Info and then initialize the plugin as shown below:

```javascript
let mmCastlabsPlugin = CastlabsMMSSJSIntgr();
  if (mmCastlabsPlugin.getRegistrationStatus() === false) {
      // Register with Mediamelon SDK
      // Change the required fields here
      mmCastlabsPlugin.registerMMSmartStreaming("castlabs", "1922042005",
                                            "SUBSCRIBER_ID_IF_AVAILABLE",
                                            "DOMAIN_NAME_IF_AVAILABLE",
                                            "SUBSCRIBER_TYPE_IF_AVAILABLE",
                                            "SUBSCRIBER_TAG_IF_AVAILABLE");
      mmCastlabsPlugin.reportPlayerInfo("castlabs", "prestoPlay", '6.0.0');
      mmCastlabsPlugin.enableLogTrace(false);
  }
```

### Step 3: Providing Content Metadata, Custom Tags 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;You can also provide the Content Metadata and Custom Tags as shown below in html/js while setting source information. Please use the `mmVideoAssetInfo` structure to provide this information.

```javascript
 let mmVideoAssetInfo= {
                        "assetName":"AssetNameHere",
                        "assetId": "AssetIDHere",
                        "videoId": "VideoIdHere",
                        "contentType": "ct",
                        "drmProtection": "DRM",
                        "episodeNumber": "EP",
                        "season":"5000",
                        "videoType":"VideoType",
                        "seriesTitle": "SeriesTitle",
                        "customTags":{
                            "Key1": "V1",
                            "Key2": "V2"
                        }
                    };

//set-up the Nowtilus Config
var nowtilusConfig = {
              isLive : true,
              streamType: 'dash',
              apiKey : "apiKey",
              url : mediaURL,
              context : 'web',
              ifa : 'ifa',
              enablePolling : 'true'
            };
```

### Step 4: Registering for Ad 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>

You can add the code for Disabling player controls during  the AD start event and Enable the player controls after the AD complete event.

```javascript
var mmSSAIPlugin = new mmNowtilusSSAIPlugin(player);
mmSSAIPlugin.addListener('onCueTimelineAdded', function (adinfo, adTimeline) {
            console.log("OnCueTimelineAdded");
            
            //Accessing skipDelay through adTimeline
            var skipDelay = adTimeline[0].adInfo.creatives[0].skipDelay;
            });
            mmSSAIPlugin.addListener('onCueTimelineEnter', function (adinfo) {
              console.log("OnCueTimelineEnter");
             // this event signifies start of an ad break and can be used to switch on and off player controls for a full ad break.
             
             //Accessing skipDelay through adinfo
             var skipDelay = adinfo.adInfo.creatives[0].skipDelay;
            });
            mmSSAIPlugin.addListener('onCueTimelineExit', function (adinfo) {
              console.log("OnCueTimelineExit");
            // this event signifies end of an ad break and can be used to switch on and off player controls for a full ad break.
            });
```

### 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 data and configuration parameters.

```javascript
mmSSAIPlugin.setup("$mediaURL","$vastURL", timelineArrayVOD, nowtilusConfig); 
// here timelineArrayVOD should contain the VOD stream data including ads. It should be empty array for a live stream
mmCastlabsPlugin.initialize(player,"$mediaURL",mmVideoAssetInfo,mmSSAIPlugin, isLive); 
```

## List of AD EVENTS

```java
onAdImpression
onAdStarted
onAdFirstQuartile
onAdMidpoint
onAdThirdQuartile
onAdProgress
onAdComplete
onCueTimelineAdded 
onCueTimelineEnter
onCueTimelineExit
```

## Get Ad Related Information

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

1. &#x20;**adinfo`.totalAds`**- returns a `int` which signifies the number of Ads in the current Ad break.
2. &#x20;**adinfo`.clickTrackingURLs`**-returns the click tracking URLs as a lis&#x74;*.*
3. **adinfo`.clickThroughURLs`** -returns the clickthrough URLs as a lis&#x74;*.*
4. **adinfo`.offset`-** returns the   AD offset in  `seconds.`
5. **adinfo`.completeURLs`**` ``-` returns the  AD Complete Tracking URLs as a lis&#x74;*.*
6. **adinfo`.midpointURLs`**` ``-` returns the  AD Midpoint Tracking URLs as a lis&#x74;*.*
7. **adinfo`.thirdQuartileURLs`**` ``-` returns the  AD ThirdQuartile Tracking URLs as a lis&#x74;*.*
8. **adinfo`.firstQuartileURLs`**` ``-` returns the  AD FirstQuartile Tracking URLs as a list
9. **adinfo`.impressionURLs`**` ``-` returns the  AD Impression URLs as a list
10. **adInfo*****`.`*****`startURLs`** - returns the AD Start URLs as a list
11. **adinfo`.adIndex`**` ``-` returns the index of the current AD in the AD break.

<br>