Radiant Player Web

This guide is for integrating the MediaMelon Player SDK for the javascript based RadiantPlayer Web v7

Step 1: Add the MediaMelonPlayer SDK

Add the following lines to the web page before RadiantPlayer js files are loaded.

  <script type="text/javascript" src="https://PATH_TO_MEDIAMELON_PLAYER_SDK/mmsmartstreaming_radiantplayer.min.js"></script>

 // Include Radiant Media Player - here we use the optimised build for Shaka player
  <script src="https://cdn.radiantmediatechs.com/rmp/7.10.0/js/rmp-shaka.min.js"></script>

 // Include Radiant Media Player - here we use the optimised build for hls.js
 // <script src="https://cdn.radiantmediatechs.com/rmp/7.10.0/js/rmp-hlsjs.min.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 support@mediamelon.com

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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Radiant Media Player - Example</title>
</head>

<body>
  <script type='text/javascript' src='./mmsmartstreaming_radiantplayer.min.js'></script>

  <!-- Include Radiant Media Player - here we use the optimised build for Shaka player -->
  <script src="https://cdn.radiantmediatechs.com/rmp/7.10.0/js/rmp-shaka.min.js"></script>

  <!-- Include Radiant Media Player - here we use the optimised build for hls.js -->
  <!-- <script src="https://cdn.radiantmediatechs.com/rmp/5.3.5/js/rmp-hlsjs.min.js"></script> -->

  <!-- Player container -->
  <div id="rmpPlayer"></div>
  <script>
    var playlistData = [{
      src: {
        hls: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
      },
      poster: "https://www.radiantmediaplayer.com/media/playlist/poster/item-1.jpg",
      thumbnail: "https://www.radiantmediaplayer.com/media/playlist/poster/item-1-thumbnail.jpg",
      adTagUrl: "https://www.radiantmediaplayer.com/vast/tags/inline-linear.xml",
      contentTitle: "Playlist Item 1",
      contentDescription: "Description for playlist item 1",
      "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"
        }
      }
    }];


    var settings = {
      licenseKey: 'ENTER_THE_LICENSE_KEY',
      skin: 's1',
      width: 640,
      height: 360,
      pathToRmpFiles: '../',
      playlistUpNextAutoplay: true,
      playlistEndedLoop: false,
      playlistData: playlistData
    };

    // init player
    var elementID = 'rmpPlayer';
    var rmp = new RadiantMP(elementID);
    rmp.init(settings);


    // MediaMelon integration
    var rmpPlugin = new mmRadiantJSAdapter();
    if (rmpPlugin.getRegistrationStatus() === false) {
      rmpPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE", "SUBSCRIBER_TAG");
      rmpPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", "PLAYER_VERSION");
    }
    
    var isLive = false;    //Set this to true for a live stream or false for a VOD stream
    // If isLive is not set here, it will be handled internally by the SDK.
    rmpPlugin.initialize(rmp, isLive);

  </script>
</body>

</html>

Last updated 10 months ago