Plyr Player Web with MediaMelon Analytics

This guide is for integrating the MediaMelon Player SDK for the javascript based Plyr Web player.

Step 1: Add the MediaMelon Player SDK

Include the following line to the web page at the start

<script type="text/javascript" src="https://PATH_TO_SMARTSTREAMING_SDK"></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 customer-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 lang="en">
  <body>
    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>      
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/demo.css">
    <script src="./mmsmartstreaming_plyrjsplayer.min.js"></script>
    <div class="grid">
      <main>
        <div id="container">
          <video controls crossorigin playsinline id="player">            
            <source
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
              type="video/mp4"
              size="720"
            />
          </video>
        </div>
      </main>
    </div>

    <script>
      var mmPlyrPlugin = new PlyrJSMMSSIntgr();

      const player = new Plyr('#player');
      
      var mmVideoAssetInfo = {
          "assetName": "ASSET_NAME11",
          "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 isLive = false;
      let streamURL = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4";
      if (mmPlyrPlugin.getRegistrationStatus() === false) {
        mmPlyrPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE11", "SUBSCRIBER_TAG1234");
        mmPlyrPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", 'PLAYER_VERSION');
        mmPlyrPlugin.reportAppInfo("APP_NAME", "APP_VERSION");
        mmPlyrPlugin.setDeviceInfo("DEVICE_MARKETING_NAME");
        mmPlyrPlugin.reportVideoQuality("VIDEO_QUALITY");
        mmPlyrPlugin.reportDeviceId("DEVICE_ID");

        mmPlyrPlugin.initialize(player, streamURL, 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.

PreviousCustom Player Web SDK NextReact Player SDK with IMA

Last updated 11 months ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <body> <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script> <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/demo.css"> <script src="./mmsmartstreaming_plyrjsplayer.min.js"></script> <div class="grid"> <main> <div id="container"> <video controls crossorigin playsinline id="player"> <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720" /> </video> </div> </main> </div> <script> var mmPlyrPlugin = new PlyrJSMMSSIntgr(); const player = new Plyr('#player'); var mmVideoAssetInfo = { "assetName": "ASSET_NAME11", "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 isLive = false; let streamURL = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"; if (mmPlyrPlugin.getRegistrationStatus() === false) { mmPlyrPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE11", "SUBSCRIBER_TAG1234"); mmPlyrPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", 'PLAYER_VERSION'); mmPlyrPlugin.reportAppInfo("APP_NAME", "APP_VERSION"); mmPlyrPlugin.setDeviceInfo("DEVICE_MARKETING_NAME"); mmPlyrPlugin.reportVideoQuality("VIDEO_QUALITY"); mmPlyrPlugin.reportDeviceId("DEVICE_ID"); mmPlyrPlugin.initialize(player, streamURL, mmVideoAssetInfo, isLive); } </script> </body> </html>