THEOPlayer Web v2 (Nowtilus SSAI)

This guide is for integrating the MediaMelon Player SDK with Nowtilus SSAI AdManager for the javascript based THEOPlayer Web v2

Step 1: Add the MediaMelon Player SDK

Add the following lines to the web page before THEOPlayer.js files are loaded

  <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

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

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

 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

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.

 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

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.

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

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 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 **
    });