> 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/untitled.md).

# THEOPlayer Web v2 (Nowtilus SSAI)

### **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 before THEOPlayer.js files are loaded

```javascript
  <script type="text/javascript" src="https://PATH_TO_SMARTSIGHT_SDK/mmsmartstreaming-theo-sdk.js"></script>

  <script type='text/javascript' src='THEOplayer.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
 var theoPlayer = new THEOplayer.Player(element, {
 libraryLocation: <location of the library>,
 license: <player license>
 })

 var theoPlugin = new mmTheoJSAdapter();
 if(theoPlugin.getRegistrationStatus() === false){
    theoPlugin.registerMMSmartStreaming(<player_name>, <customer_id>, <subscriber_id>, <domain_name>, <subscriber_type> , <subscriber_tag>);
    theoPlugin.reportPlayerInfo(<player_brand>, <player_model>, <player_version>);
    }
 theoPlugin.initialize(theoPlayer);
```

### Step 3: Providing Content Metadata and Custom Tags <a href="#cl-step-4-providing-content-metadata-and-custom-tags" id="cl-step-4-providing-content-metadata-and-custom-tags"></a>

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
 theoPlayer.source = 
 {
	sources : 
	[{
		src : 'http://playertest.longtailvideo.com/adaptive/bbbfull/bbbfull.m3u8',
    type : 'application/x-mpegurl',
	  mmVideoAssetInfo: 
				{
					"assetName":"ASSETNAME_STRING/Episode Name",
					"assetId": "ASSETID_STRING",
					"videoId": "VIDEOID_STRING",
					"contentType": "Genre of the content (episode, movies, etc)",
					"drmProtection": "DRM type used (Widevine, Playready, etc)",
					"episodeNumber": "Episode Number, e.g., 2 or E2",
					"season":"Season number of the Series Title, e.g, 2 or S2",
					"seriesTitle": "Series Title",
					"customTags":
					{
						"key1": "VALUE_STRING1",
						"key2": "VALUE_STRING2",
						"key3": "VALUE_STRING3"
         	}
     		}
	}]
 };
```

### Step 4: Setting up the SSAI Ad Manager  <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
var mmSSAIAdManager = new mmNowtilusSSAIPlugin(theoPlayer);
.
.
.
theoPlugin.setSSAIAdmanager(mmSSAIAdManager);
.
.
.
var nowtilusConfig = {
      isLive: <false for VOD , true for live content>,
      streamType: <stream type>
}
.
.
.
mmSSAIAdManager.setup(<Media URL>, <VASt Data URL> , nowtilusConfig);
```

### Step 5: 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 mmSSAIAdManager = new mmNowtilusSSAIPlugin(theoPlayer);

mmSSAIAdManager.addListener('start', function(adinfo){
        console.log("AD start");
        //** Application to Disable Player Controls here **
    });
mmSSAIAdManager.addListener('complete', function(adinfo){
        console.log("AD complete");
        //** Application to Enable Player Controls here **
    });
```