Bitmovin Web v8 SDK with Content Provider Metrics (with Nowtilus SSAI)

This guide is for integrating the MediaMelon Player SDK with the Nowtilus SSAI Ad Manager for Bitmovin Web v8. This release provides analytics metrics to content providers Starz and Toolbox

Step 1: Add MediaMelon Player SDK

Integrate the MediaMelon SmartStreaming SDK with the Bitmovin JS Player. Include the following line to the web page before bitmovinplayer.js is loaded

<script type="text/javascript" src="path-to/mmsmartstreaming-bitmovin-cp-ssai.min.js" ></script>
<script type="text/javascript" src="path-to/bitmovinplayer.js"></script>

Step 2: Register and Initialize MediaMelon Player SDK

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

Create a new plugin object and after the player instance has been created, register it, report player information, and then initialize the MediaMelon Player SDK plugin as shown below:

var MMBitmovinPlugin= new BitmovinPlayerMMSSIntgr();

  const config = {
      key: 'Bitmovin_license'      
  };

  var container = document.getElementById('my-player');
  var player = new bitmovin.player.Player(container, config);
  
MMBitmovinPlugin.registerMMSmartStreaming("PLAYER_NAME", "424847541", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE", "SUBSCRIBER_TAG");
MMBitmovinPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_ODEL", "PLAYER_VERSION");
MMBitmovinPlugin.reportDeviceInfo("BRAND", "DEVICE_MODEL", "OS", "OS_VERSION", "NETWORK_OPERATOR", "DEVICE_MARKETING_NAME");
MMBitmovinPlugin.setAssetConfiguration(source); //check for source in step-4
MMBitmovinPlugin.setContentProviderDetails("PLAYBACK_URL");

Step 3: Report Player load error

Notify Bitmovin load failure using reportPlayerError api as shown below:

player.load(source).then(function () {
     // Success
  },function (reason) {
      // Error!
      MMBitmovinPlugin.reportPlayerError(reason, source);
  });

Step 4: 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.

 var source = {
 dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
 hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
 progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
 poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg',
 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 5: Registering for Ad events for disabling Player controls

var NowtilusAdPlugin =new mmNowtilusSSAIPlugin(player);

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

let isLive = true; //set this to true for live stream and false for VOD stream.
// If isLive variable is not set here it will be handled internally.
MMBitmovinPlugin.initialize(player, bitmovin.player.PlayerEvent, isLive, NowtilusAdPlugin); //important step

Step 6: Update Asset Info

If Asset Information needs to be updated dynamically during the live session without re-initiating the player, then the updateAssetInfo API can be used to update the new AssetInfo

Note

• This API must be called for updating asset info for the live streams only

• This API must be called after the Player has started the playback of the live stream

• New Asset Info Object will override the previous values, Hence set all the fields that are required every time calling this API

// Create a new assetInfo object with the values need to be updated
var newAssetInfo =  { 
     "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",
     "videoType":"live/vod/catch-up",
     "customTags":{
         "key1": "VALUE_STRING1",
         "key2": "VALUE_STRING2",
         "key3": "VALUE_STRING3"              
             }          
         }
// Update the new assetInfo
MMBitmovinPlugin.updateAssetInfo(newAssetInfo);

The above code is tested with URLs with the structure:

• https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8?tbtoken=JWTtoken&provider=tbox&cid=ContentId

• https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8?tbtoken=JWTtoken&provider=tbox&cid=ContentId

Step 7: Enabling Content Provider Metrics

Content provider metrics are enabled by providing the following values

Parameter	Value
provider	stzp : Starz tbox: Toolbox
tbtoken	JWT Token for Toolbox endpoint
cid	Content ID
sid	Starz session ID

For enablling Toolbox metrics please pass - provider, tbtoken and cid values as shown below

https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8?tbtoken=JWTtoken&provider=tbox&cid=ContentId

For enabling Starz content provider metrics please pass: provider, cid and sid values as shown below

https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8?provider=stzp&cid=ContentId&sid=SessionId