HTML5 Player Web

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

Step 1: Add the MediaMelonPlayer SDK

Add the following lines to the web page at the starting.

  <script type="text/javascript" src="https://PATH_TO_MEDIAMELON_PLAYER_SDK/mmsmartstreaming_htmlplayer.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>
  <title>MP4 video file</title>
  <script src="./mmsmartstreaming_htmlplayer.min.js"></script>
</head>
<body>
  <video id="video" class="video-js vjs-default-skin" height="300" width="600" autoplay controls>
    <p>
      Your browser doesn't support video. Please <a href="http://browsehappy.com/">upgrade your browser</a> to see the
      example.
    </p>
    <source src="https://refapp.hbbtv.org/videos/test/test1_30s.mp4" type="video/mp4">
  </video>
  <script>

    var Videop = document.getElementById("video");
    let html5Plugin = new Html5MMSSIntgr();

    if (html5Plugin.getRegistrationStatus() === false) {
      html5Plugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE", "SUBSCRIBER_TAG");
      html5Plugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", "PLAYER_VERSION");
    }

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

    let mediaUrl = "https://refapp.hbbtv.org/videos/test/test1_30s.mp4";
    let 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.
    html5Plugin.initialize(Videop, mediaUrl, mmVideoAssetInfo, isLive);
  </script>
</body>
</html>

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.

PreviousBitmovin Web Player NextFlow Player Web

Last updated 1 year ago

Was this helpful?

<!DOCTYPE html> <html> <head> <title>MP4 video file</title> <script src="./mmsmartstreaming_htmlplayer.min.js"></script> </head> <body> <video id="video" class="video-js vjs-default-skin" height="300" width="600" autoplay controls> <p> Your browser doesn't support video. Please <a href="http://browsehappy.com/">upgrade your browser</a> to see the example. </p> <source src="https://refapp.hbbtv.org/videos/test/test1_30s.mp4" type="video/mp4"> </video> <script> var Videop = document.getElementById("video"); let html5Plugin = new Html5MMSSIntgr(); if (html5Plugin.getRegistrationStatus() === false) { html5Plugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE", "SUBSCRIBER_TAG"); html5Plugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", "PLAYER_VERSION"); } 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" } }; let mediaUrl = "https://refapp.hbbtv.org/videos/test/test1_30s.mp4"; let 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. html5Plugin.initialize(Videop, mediaUrl, mmVideoAssetInfo, isLive); </script> </body> </html>