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

Variable

Description

PLAYER_NAME

String containing the Player Name.

CUSTOMER_ID

String containing your MediaMelon-assigned Customer ID.

SUBSCRIBER_ID

String containing your Subscriber’s ID. If you do not use subscriber IDs, enter null

DOMAIN_NAME

String containing your section of your subscriber or assets. (Optional)

SUBSCRIBER_TYPE

String containing the Subscriber Type (e.g. “Free”, “Paid”). If you do not use subscriber types, enter null

SUBSCRIBER_TAG

String containing an additional subscriber-specific information. This is sent in clear (not hashed) to SmartSight and it is advised to not send sensitive information in this field.

ASSET_ID

String containing Asset Id.

ASSET_NAME

String containing Asset Name.

VIDEO_ID

String containing your video’s ID. If you do not use videos IDs, enter null.

CONTENT_TYPE

String containing type of the Content. For example - "Movie", "Special", "Clip", "Scene Epis Lifts".

GENRE

String containing Genre of the content. For example - "Comedy", "Horror".

DRM_PROTECTION

Widevine, Fairplay, Playready etc. Unknown means content is protected, but protection type is unknown. For clear contents, do not set this field

EPISODE_NUMBER

String containing sequence number of the Episode.

SEASON

String containing the Season. For example - "Season1".

SERIES_TITLE

String containing Title of the Series.

VIDEO_TYPE

String containing Video Type. For example - "LIVE", "VOD".

CUSTOM_TAGS

Extra custom metadata can be added here if required. If extra metadata is not required, enter null.

PLAYER_BRAND

String containing Player Brand.

PLAYER_MODEL

String containing Player Model. For example - This could be a variant of player. Say name of third party player used by organisation. Or any human readable name of the player.

PLAYER_VERSION

String containing Player Version.

PreviousVideoJS Web with Google DAI NextMediaMelon Web Kaltura Player Plugin Integration Document

Last updated 2 months ago