VideoJS Web with Mediamelon Analytics

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

Step 1: Add the MediaMelon Player SDK

Include the following line to the web page in 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>
<head>
<meta charset=utf-8 />
<title>VIDEO JS </title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
  <h1>Video.js Example Embed</h1>

  <video id="my_video_1" muted="muted" class="vjs-default-skin" controls preload="auto" width="640" height="268"></video>
  
  //Import the player library files here
  <script src="https://PATH_TO_SMARTSTREAMING_SDK"></script>
  <script>
  
    var player = videojs('my_video_1');
    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"
                        }
             };
    //registering to the MediaMelon plugin
    var mmvjs8Plugin = new VideoJSMMSSIntgr();
    if (mmvjs8Plugin.getRegistrationStatus() === false) {
        mmvjs8Plugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID",
                                                "SUBSCRIBER_ID",
                                                "DOMAIN_NAME", 
                                                "SUBSCRIBER_TYPE",
                                                "SUBSCRIBER_TAG");
        mmvjs8Plugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", 'PLAYER_VERSION');
        
        mmvjs8Plugin.reportAppInfo("APP_NAME", "APP_VERSION");  //OPTIONAL
        mmvjs8Plugin.setDeviceInfo("DEVICE_MARKETING_NAME");    //OPTIONAL
        mmvjs8Plugin.reportVideoQuality("VIDEO_QUALITY");       //OPTIONAL
        mmvjs8Plugin.reportDeviceId("DEVICE_ID");               //OPTIONAL
    }
      
    var mediaURL = "STREAM_URL";
    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.
    player.src({
           src: mediaURL,
           mmVideoAssetInfo: mmVideoAssetInfo
    });
    mmvjs8Plugin.initialize(player, mediaURL, mmVideoAssetInfo, isLive);     
    player.play();
    
    // Call this Error API to report an App Error.
    mmvjs8Plugin.reportAppError("ERROR_MESSAGE", "ERROR_CODE"); 
    
    //Call this API when the player re-initialized the source. (During content switch)
    mmvjs8Plugin.reportContentSwitch();
      
  </script>
  
</body>
</html>

PreviousWeb SDKNextVideoJS Web with Google DAI

Last updated