> For the complete documentation index, see [llms.txt](https://docs.mediamelon.com/mediamelon-nowtilus-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-nowtilus-ssai/mediamelon-player-sdk-web/mediamelon-sdk-integration-with-castlabs-js-v6.2-web-player.md).

# 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mediamelon.com/mediamelon-nowtilus-ssai/mediamelon-player-sdk-web/mediamelon-sdk-integration-with-castlabs-js-v6.2-web-player.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.