> 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/bitmovin-web-nowtilus-ssai.md).

# Bitmovin Web (Nowtilus SSAI)

### Step 1: Add MediaMelon SDK[](https://smartsight2.mediamelon.com/docs/bitmovinjsplayer/source/stepbystepguide.html#step-1-add-mediamelon-sdk) <a href="#pf-step-1-add-mediamelon-sdk" id="pf-step-1-add-mediamelon-sdk"></a>

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

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

{% hint style="info" %}
This MediaMelon SDK has been verified for Bitmovin Web v8.45.1 and v8.57.0
{% endhint %}

### Step 2: Register and Initialize MediaMelon SDK[](https://smartsight2.mediamelon.com/docs/bitmovinjsplayer/source/stepbystepguide.html#step-2-register-and-initialize-mediamelon-sdk) <a href="#rd-step-2-register-and-initialize-mediamelon-sdk" id="rd-step-2-register-and-initialize-mediamelon-sdk"></a>

**Note:** \<customer\_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at [support@mediamelon.com](mailto:support%40mediamelon.com)

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

```javascript
var MMBitmovinPlugin= new BitmovinPlayerMMSSIntgr();
  const config = {
      key: 'Bitmovin_license',
      adaptation: {
          desktop: {
              onVideoAdaptation: MMBitmovinPlugin.onVideoAdaptationMediaMelon,
           },
           mobile: {
              onVideoAdaptation: MMBitmovinPlugin.onVideoAdaptationMediaMelon,
          },
      }
  };

  var container = document.getElementById('my-player');
  var player = new bitmovin.player.Player(container, config);
  MMBitmovinPlugin.registerMMSmartStreaming(<player_name>, <customer_id>, <subscriber_id>, <domain_name>, <subscriber_type> , <subscriber_tag>);
  MMBitmovinPlugin.reportPlayerInfo(<player_brand>, <player_model>, <player_version>);
  MMBitmovinPlugin.initialize(player); // Please do not initialize if you want to use Ad events, Please follow intialize player in Step 5
```

{% hint style="danger" %}
Please do not initialize the MediaMelon SDK right now if you are going to subscribe to Ad Events
{% endhint %}

### Step 3: Report Player load error[](https://smartsight2.mediamelon.com/docs/bitmovinjsplayer/source/stepbystepguide.html#step-3-report-player-load-error) <a href="#fq-step-3-report-player-load-error" id="fq-step-3-report-player-load-error"></a>

Notify Bitmovin load failure using reportPlayerError api as shown below:

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

### Step 4: Providing Content Metadata and Custom Tags[](https://smartsight2.mediamelon.com/docs/bitmovinjsplayer/source/stepbystepguide.html#step-4-optional-providing-assetid-assetname-videoid-qbrmode-metaurl-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
 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 <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>

```javascript
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 **
    });
MMBitmovinPlugin.initialize(player,undefined,NowtilusAdPlugin);
```

{% hint style="info" %}
**Remember to initialize MediaMelon SDK**

```javascript
MMBitmovinPlugin.initialize(player,undefined,NowtilusAdPlugin);
```

{% endhint %}

### Step 6: Update Asset Info <a href="#dz-step-6-update-asset-info" id="dz-step-6-update-asset-info"></a>

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

{% hint style="info" %}
**Note**

* This API must be called for updating asset info for the live streams only&#x20;
* This API must be called after the Player has started the playback of the live stream&#x20;
* New Asset Info Object will override the previous values, Hence set all the fields that are required every time calling this API
  {% endhint %}

```javascript
// 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",
     "customTags":{
         "key1": "VALUE_STRING1",
         "key2": "VALUE_STRING2",
         "key3": "VALUE_STRING3"              
             }          
         }
// Update the new assetInfo

```