Shaka Player Web v4

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

Step 1: Add the MediaMelon Player SDK

Include the following lines to the web page after the Shakaplayer js files are loaded and before the application source file ( In the sample application testMMSDK.js) is loaded 

<html>
  <head>
    <!-- Shaka Player compiled library: -->
    <script src="dist/shaka-player.compiled.js"></script>
    <!-- STEP 1: Add js file for Shakaplayer SDK -->
    <script src="mmsmartstreaming_shakaplayer.min.js"></script>
    <!-- Your application source: -->
    <script src="testMMSDK.js"></script>
  </head>
  <body>
    <video id="video"
           width="640"
           poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
           controls autoplay></video>
  </body>
</html>

Step 2: Create the Test Application to integrate Media Melon SDK with Shakaplayer

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

In the initPlayer function , just after we have obtained the reference to the video element and created the shakaplayer object ( Lines 22-23 ) we integrate the Media Melon SDK in 5 easy steps

Step 2.1 Specify asset information for MM SDK

Step 2.2 Create MMSDK Object

Step 2.3 Register SDK with Mediamelon data platform

Step 2.4 Provide additional player information

Step 2.5 Initialize MMSDK

These steps have been annotated in the code below

async function initPlayer() {
  // Create a Player instance.
  const video = document.getElementById('video');
  const player = new shaka.Player(video);

  // Attach player to the window to make it easy to access in the JS console.
  window.player = player;

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

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

  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.
  mmsdkPlayersdkIntgr.initialize(player, video, manifestUri, mmVideoAssetInfo, isLive);
}

PreviousVideoJS Web with Google DAINextMediaMelon Web Kaltura Player Plugin Integration Document

Last updated