# NexPlayer Web v4

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

Include the following lines to the web page before nexplayer js files are loaded

```javascript
<script type="text/javascript" src="https://PATH_TO_SMARTSTREAMING_SDK/mmsmartstreaming-nexplayer-sdk.js"></script>
<script src="https://nexplayer.nexplayersdk.com/4.2/nexplayer.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> is 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
<!DOCTYPE html>
<html>
<head>
    ...
    ...
    ...
</head>

<body>
    <h1>NexPlayer HTML5</h1>
    ...
    ...
    <script src="path to your Mediamelon SDK file"></script>
    <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"></script>
    
    <script type="text/javascript">
    let nexPlayer_wrapper = new NEXPlayerJSMMSSIntgr();

        if(nexPlayer_wrapper.getRegistrationStatus() === false){
            nexPlayer_wrapper.registerMMSmartStreaming(<player_name>,<customer_id>, <subscriber_id>,<domain_name>, <subscriber_type>, <subscriber_tag>);
            nexPlayer_wrapper.reportPlayerInfo(<player_brand>,<player_model>,<player_version>);
        };
      var   mmVideoAssetInfo= {
                    "assetName":"$AssetName / $EpisodeName / $ContentTitle",
                    "assetId": "$AssetID",
                    "videoId": "$VideoID",
                    "contentType": "$Genre",
                    "drmProtection": "$DrmType",
                    "episodeNumber": "$EpisodeNumber",
                    "season":"$SeasonNumber",
                    "seriesTitle": "$Series Title",
                    "customTags":{
                        "Key1": "Value1",
                        "Key2": "Value2"
                    }
                  };
                  
        let mmAssetData = {
         "mmVideoAssetInfo" : mmVideoAssetInfo
      };

  let callBackWithPlayers = function (nexplayerInstance, videoElement) {
      nexPlayer_wrapper.initialize(nexplayerInstance,videoElement,mmAssetData.mmVideoAssetInfo);
  }
        nexplayer.Setup({
            key: <Enter your key here>,
            div: document.getElementById('player'),
            src: <Enter link to your video/stream/mediaSource>,
            callbacksForPlayer: callBackWithPlayers,
        });

    </script>
</body>
</html>
```
