NexPlayer Web v4

This guide is for integrating the MediaMelon Player SDK for the javascript based NexPlayer Web v4

Step 1: Add the MediaMelon Player SDK

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

<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

<customer_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at

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

<!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>

PreviousMediaMelon Web Kaltura Player Plugin Integration Document NextTHEOPlayer Web

Last updated 6 months ago

Was this helpful?

<!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>