> For the complete documentation index, see [llms.txt](https://docs.mediamelon.com/mediamelon/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/smartsight-player-sdk-integration/web/custom-player-web-sdk.md).

# Custom Player Web SDK

### **Step 1: Add** the MediaMelon SDK Files <a href="#step-1-add-mediamelon-smartstreaming-sdk-hardbreak" id="step-1-add-mediamelon-smartstreaming-sdk-hardbreak"></a>

Add the following lines to the web page before player files are loaded.&#x20;

```javascript
  <script type="text/javascript" src="https://PATH_TO_MEDIAMELON_SDK/mmsmartstreamingsdk.min.js"></script>
```

### **Step 2: Register and Initialize** the MediaMelon Player SDK <a href="#step-2-register-and-initialize-mediamelon-sdk" id="step-2-register-and-initialize-mediamelon-sdk"></a>

{% hint style="info" %}
\<customer\_id> as your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at [support@mediamelon.com](http://40mediamelon.com/)
{% endhint %}

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

```javascript
var customPlugin = new mmCustomJSAdapter();

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"
}

if(customPlugin.getRegistrationStatus() === false){
 customPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE" , "SUBSCRIBER_TAG");
 customPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", "PLAYER_VERSION");
}
 
customPlugin.reportAppInfo("APP_NAME", "APP_VERSION");
customPlugin.setDeviceInfo("DEVICE_ID", "DEVICE_MARKETING_NAME");
customPlugin.reportVideoQuality("VIDEO_QUALITY");

customPlugin.reportPresentationInfo(presentationType, presentationArray);

var isLive = false;    //Set this to true for a live stream or false for a VOD stream
customPlugin.initialize(mmVideoAssetInfo, streamURL, totalDuration, isLive);
```

> **Note:** **Presentation Info API**
>
> This API should send all the available video and audio qualities and it requires two parameters: `presentationType` and `presentationArray`. Variable `presentationType` is a Enum which describes whether the data is of Video or Audio.
>
> **Presentation Array Structure:**
>
> ```javascript
> [
>     {
>         "codec": "avc1.42001e",
>         "bandwidth": 493000,
>         "width": 224,
>         "height": 100 
>     },
>     {
>         "codec": "avc1.640028",
>         "bandwidth": 2468000,
>         "width": 1680,
>         "height": 750 
>     }
> ]
> ```

Enum values and their descriptions for the `presentationType` variable are as below;

<table><thead><tr><th width="326">Enum value</th><th>Description</th></tr></thead><tbody><tr><td>PRESENTATIONTYPE.VIDEO</td><td>If the presentation data is about video track then send this enum value in the API</td></tr><tr><td>PRESENTATIONTYPE.AUDIO</td><td>If the presentation data is about audio track then send this enum value in the API</td></tr></tbody></table>

### **Step 3: API to Report Video Progress**  <a href="#step-2-register-and-initialize-mediamelon-sdk" id="step-2-register-and-initialize-mediamelon-sdk"></a>

This API should be triggered every 1 second. It requires an object as a parameter that contains information like playback position, current bitrate, and resolution in the form of width & height. The same API should be used for content progress reporting and Ad progress reporting.

```javascript
var progressObject = {
    "playbackPosition": 10, //playback position should be in milliseconds
    "bitrate": 12000,
    "width": 208,
    "height": 100
}
customPlugin.reportTimeUpdate(progressObject);
```

### **Step 4: APIs that can be Triggered when Required** <a href="#step-2-register-and-initialize-mediamelon-sdk" id="step-2-register-and-initialize-mediamelon-sdk"></a>

#### Report State:&#x20;

Trigger this API when a state change occurs in the player. This API requires an Enum value as a parameter that represents the current state of the player or the action that happened to the player.

```javascript
var state = PLAYERSTATE.PLAYING;
customPlugin.reportStateChange(state);
```

Enum values that can be sent as a parameter in the reportStateChange API as described below;

<table><thead><tr><th width="406">Enum Value</th><th>Description</th></tr></thead><tbody><tr><td>PLAYERSTATE.MANIFEST_LOAD_START</td><td>When the manifest load started. Not required if the video doesn't support manifest.</td></tr><tr><td>PLAYERSTATE.MANIFEST_LOAD_COMPLETE</td><td>When the manifest load is completed successfully. </td></tr><tr><td>PLAYERSTATE.PLAYING</td><td>When the video starts playing. It might be the first play or play after a pause.</td></tr><tr><td>PLAYERSTATE.PAUSE</td><td>When the video is paused.</td></tr><tr><td>PLAYERSTATE.SEEK_START</td><td>When the video seek starts.</td></tr><tr><td>PLAYERSTATE.SEEK_COMPLETE</td><td>When the video seek completes.</td></tr><tr><td>PLAYERSTATE.BUFFER_START</td><td>When the video buffering starts.</td></tr><tr><td>PLAYERSTATE.BUFFER_COMPLETE</td><td>When the video buffering completes.</td></tr><tr><td>PLAYERSTATE.ENDED</td><td>When the video is ended.</td></tr><tr><td>PLAYERSTATE.AD_BREAK_STARTED</td><td>When the Ad break started.</td></tr><tr><td>PLAYERSTATE.AD_IMPRESSION</td><td>When the Ad impression occurs.</td></tr><tr><td>PLAYERSTATE.AD_STARTED</td><td>When the Ad started.</td></tr><tr><td>PLAYERSTATE.AD_FIRST_QUARTILE</td><td>When Ad reached 25% of its duration.</td></tr><tr><td>PLAYERSTATE.AD_MIDPOINT</td><td>When Ad reached 50% of its duration.</td></tr><tr><td>PLAYERSTATE.AD_THIRD_QUARTILE</td><td>When Ad reached 75% of its duration.</td></tr><tr><td>PLAYERSTATE.AD_SKIPPED</td><td>When Ad skipped.</td></tr><tr><td>PLAYERSTATE.AD_CLICKED</td><td>When Ad clicked.</td></tr><tr><td>PLAYERSTATE.AD_COMPLETED</td><td>When Ad completed.</td></tr><tr><td>PLAYERSTATE.AD_STOPPED</td><td>When the Ad stopped in between without completion.</td></tr><tr><td>PLAYERSTATE.AD_BREAK_STOPPED</td><td>When the Ad break ended.</td></tr></tbody></table>

#### Report Ad Data:

Trigger this API to report the Ad data before an Ad break. This API requires a `adTimelineArray` parameter that should contain all the Ad details of the upcoming Ad break.&#x20;

If the upcoming Ad break contains 4 Ads then the adTimelineArray should contain all 4 ad details.

```javascript
var adTimelineArray = [
    {
        "adClient": "mmAds-Nowtilus",
        "adId": "11023407",
        "adDuration": 15000,    // Ad duration should be in milliseconds
        "adPosition": ADPOSITION.MID,
        "adLinear": "linear",
        "adCreativeType": "hls",
        "adSystem": "SMART AdServer",
        "isBumper": false,
        "adTitle": "Washing Machine Ad",
        "adUrl": "adurl.com",
        "adCreativeId": "14738"
    }
];

customPlugin.reportAdTimelineData(adTimelineArray);
```

Enum values and descriptions for ADPOSITION are mentioned below;

| Enum            | Description              |
| --------------- | ------------------------ |
| ADPOSITION.PRE  | Represents pre Ad break  |
| ADPOSITION.MID  | Represents mid Ad break  |
| ADPOSITION.POST | Represents post Ad break |

#### Report Error:

Trigger this API when an error occurs in the player, content, Ad, or application. This API requires three parameters that are error message, error code, and error type.

```javascript
var errorType = ERRTYPE.FATAL;
customPlugin.reportError("ERROR_MESSAGE", "ERROR_CODE", errorType);
```

Enum values and their descriptions for the error type variable are as below;

<table><thead><tr><th width="326">Enum value</th><th>Description</th></tr></thead><tbody><tr><td>ERRTYPE.FATAL</td><td>If the error type is fatal</td></tr><tr><td>ERRTYPE.WARNING</td><td>If the error type is warning</td></tr></tbody></table>

**Report Track:**

Trigger this API when a track change occurs in Audio, Video, or Subsitle tracks. This API requires two parameters: track type and current track.

Also, trigger this API when the video starts playing to report initial Audio, Video, and Subtitle tracks.

```javascript
var trackType = TRACK.AUDIO;
customPlugin.reportTrackChange(trackType, "CURRENT_TRACK");
```

Enum values and their descriptions for the track type variable are as below;

| Enum Value     | Description                                                              |
| -------------- | ------------------------------------------------------------------------ |
| TRACK.SUBTITLE | If reporting the subtitle track information, send this as the trackType. |
| TRACK.AUDIO    | If reporting the audio track information, send this as the trackType.    |
| TRACK.VIDEO    | If reporting the video track information, send this as the trackType.    |

#### Report Volume:

Trigger this API when a volume change occurs in the player. Send the volume value in percentage as shown below;

```javascript
customPlugin.reportVolumeChange(76);
```