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

Step 1: Add the MediaMelon Player SDK

Add the following lines to the web page after Castlabs files are loaded

<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

<customer_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at [e-mail]

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

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

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.

 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

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

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

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.

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

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. adinfo.totalAds- returns a int which signifies the number of Ads in the current Ad break.

2. adinfo.clickTrackingURLs-returns the click tracking URLs as a list.

3. adinfo.clickThroughURLs -returns the clickthrough URLs as a list.

4. adinfo.offset- returns the AD offset in seconds.

5. adinfo.completeURLs - returns the AD Complete Tracking URLs as a list.

6. adinfo.midpointURLs - returns the AD Midpoint Tracking URLs as a list.

7. adinfo.thirdQuartileURLs - returns the AD ThirdQuartile Tracking URLs as a list.

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.