THEOPlayer Web

This guide is for integrating the MediaMelon Player SDK for the javascript based THEOPlayer Web Version 4.5

Step 1: Add the MediaMelonPlayer 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_theoplayer.min.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 support@mediamelon.com

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 mmVideoAssetInfo = {
      "assetName": "ASSET_NAME",
      "assetId": "ASSET_ID",
      "videoId": "VIDEO_ID",
      "contentType": "CONTENT_TYPE",
      "genre": "GENRE",
      "drmProtection": "DRM_PROTECTION",
      "episodeNumber": "EPISODE_NUMBER",
      "season": "SEASON",
      "seriesTitle": "SERIES_TITLE",
      "videoType": "VIDEO_TYPE",
      "customTags": {
          "key1": "VALUE_STRING1",
          "key2": "VALUE_STRING2"
      }
 };

 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.reportAppInfo("APP_NAME", "APP_VERSION");
 theoPlugin.setDeviceInfo("DEVICE_MARKETING_NAME");
 theoPlugin.reportVideoQuality("VIDEO_QUALITY");
 theoPlugin.reportDeviceId("DEVICE_ID");
    
 var isLive = false;    //Set this to true for a live stream or false for a VOD stream
 // If isLive is not set here, it will be handled internally by the SDK.
 theoPlugin.initialize(theoPlayer, "STREAM_URL", mmVideoAssetInfo, isLive);
 
 // Call this Error API to report an App Error.
 theoPlugin.reportAppError("ERROR_MESSAGE", "ERROR_CODE"); 

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' // HLS
	}]
 };

Please note that the type field in sources needs to be "application/dash+xml" for DASH.

Last updated