# 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

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mediamelon.com/mediamelon-nowtilus-ssai/mediamelon-player-sdk-web/bitmovin-web-nowtilus-ssai.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.