MediaMelon JS Custom Multi-Player SDK Integration Document

This guide is for integrating the MediaMelon Custom Multi-Player SDK for the JavaScript-based Web Players

Step 1: Add MediaMelon Player SDK

Step 2: Instantiate and Register SDK

Step 3: Initialize Playback Session

Step 4: Custom Metadata

Step 5: Stream and Network Information

Step 6: Chunk/Segment Information

Step 7: Player Events

Step 8: Fallback & Request Status

Step 9: Ad Data & Ad Events

Step 10: Custom Events

Release Notes

Step 1: Add MediaMelon SDK

• NPM (2.1.0):

npm i mediamelon-js-custom-sdk

import { mmJSCustomAdapter, MMPlayerState, RenditionInfo, RequestStatus} from 'mediamelon-js-custom-sdk'

Step 2: Instantiate and Register SDK

CUSTOMER_ID is your MediaMelon assigned Customer ID. If you do not know your Customer ID, contact MediaMelon at [email protected].

Step 2.1: Instantiate and Report Registration Information:

var mmJSPlugin = new mmJSCustomAdapter();
mmJSPlugin.registerMMSmartStreaming("PLAYER_NAME", 
    "CUSTOMER_ID", 
    "SUBSCRIBER_ID", 
    "DOMAIN_NAME", 
    "SUBSCRIBER_TYPE", 
    "SUBSCRIBER_TAG", 
    hashSubscriberId      //Boolean Value
);

hashSubscriberId: Set it to true to hash the subscriber ID, and to false to process the subscriber ID without hashing.

Step 2.2: Report Player Information:

mmJSPlugin.reportPlayerId("PLAYER_ID");
mmJSPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", "PLAYER_VERSION");            
mmJSPlugin.reportBasePlayerInfo("BASE_PLAYER_NAME", "BASE_PLAYER_VERSION");

Step 2.3: Report Application Information:

mmJSPlugin.reportAppInfo("APPLICATION_NAME","APPLICATION_VERSION");
mmJSPlugin.reportAppSessionId("APP_SESSION_ID");

Step 2.4: Report Device Information:

var deviceInfo = {
    "deviceName": "DEVICE_NAME",
    "deviceBrand": "DEVICE_BRAND",      // Device Brand or Manufacturer
    "deviceModel": "DEVICE_MODEL",
    "deviceId": "DEVICE_ID",
    "deviceOS": "DEVICE_OS",
    "deviceOSVersion": "DEVICE_OS_VERSION",            
    "screenWidth": screen_width,        //Integer Value
    "screenHeight": screen_height       //Integer Value
};
mmJSPlugin.reportDeviceInfo(deviceInfo);

Step 2.5: Report Sub Property ID:

mmJSPlugin.reportSubPropertyId("SUB_PROPERTY_ID");

Step 3: Initialize Playback Session

Step 3.1: Initialize Session with Content Metadata:

var contentMetaData = {
    "assetName": "ASSET_NAME",
    "assetId": "ASSET_ID",
    "videoId": "VIDEO_ID",
    "contentType": "CONTENT_TYPE",
    "genre": "GENRE",
    "drmProtection": "DRM_PROTECTION",
    "drmLevel": "DRM_LEVEL",
    "episodeNumber": "EPISODE_NUMBER",
    "season": "SEASON",
    "seriesTitle": "SERIES_TITLE",
    "videoType": "VIDEO_TYPE"
};

mmJSPlugin.initializeSession(contentMetaData, "STREAM_URL");

All metadata fields set from Step 3 will be reset when initializeSession is called. Therefore, ensure that all session-specific metadata, such as view session ID, preload, and similar fields, are reported after initializeSession is called for every playback session.

Step 3.2: Report View Session ID:

mmJSPlugin.reportViewSessionId("VIEW_SESSION_ID");

Step 3.3: Report Experiment Name:

mmJSPlugin.reportExperimentName("EXPERIMENT_NAME");

Step 3.4: Report Preload:

mmJSPlugin.reportPreload(<boolean>);

Step 3.5: Report Player Resolution:

mmJSPlugin.reportPlayerResolution(width, height);

Step 3.6: Report User-Initiated Playback:

This function indicates the intent for playback and must be invoked after initializeSession. Any metadata fields reported before this API call will be included in the first payload sent to the dashboard. To avoid Null values in metadata fields, it is recommended to report all available metadata before calling this API.

mmJSPlugin.reportUserInitiatedPlayback();

Step 4: Custom Metadata

Check the custom tags configuration in your dashboard and report accordingly. If the custom tags are not configured, please configure and use them accordingly.

mmJSPlugin.reportCustomMetadata("custom_1", "value1");
mmJSPlugin.reportCustomMetadata("custom_2", "value2");

Step 5: Stream and Network Information

Step 5.1: Report Stream Information:

mmJSPlugin.reportStreamInfo("STREAM_FORMAT", "MEDIA_TYPE", "SOURCE_TYPE");

Step 5.2: Update Stream URL:

mmJSPlugin.updateStreamURL("STREAM_URL");

Step 5.3: Report Presentation Info:

mmJSPlugin.reportPresentationInfo(<is_live>, <video_duration>);

• is_live: Set to true for live video stream and to false for the VOD stream.

• video_duration: Integer value in milliseconds.

Step 5.4: Report Track Information

Call this API with initial values, and every time there is a change in the track info. Call this API when the user enables/disables subtitles or when the user changes the audio track.

mmJSPlugin.reportTrackinfo(<is_subtitle_active>, "SUBTITLE_TRACK", "AUDIO_TRACK", <is_vds_active>);

is_subtitle_active: Set it to true if the subtitles are active; otherwise, set it to false.

is_vds_active: Set it to true if the type of audio is Virtual Dialogue Sound, otherwise, set it to false.

Step 5.5: Report Rendition:

At the start of the video, create a ReditionInfo object, assign initial rendition values to the object, and report it to the SDK. For any subsequent rendition change, update only the fields that changed in the same RenditionInfo object. Leave the unchanged fields as-is, and report the updated object to the SDK.

var renditionInfo = new RenditionInfo();
rendition.bitrate = <birate>;            //Integr Value in bps
rendition.width = <width>;               //Integr Value
rendition.height = <height>;             //Integer Value
rendition.frameRate = <frame_rate>;      //Integr Value in fps
rendition.aCodec = "AUDIO_CODEC";
rendition.vCodec = "VIDEO_CODEC";

mmJSPlugin.reportRendition(renditionInfo);

Step 5.6: Update DRM Type:

updateDrmType(drmType:) is deprecated. A new API called updateDRM(drmProtection:, drmLevel:) is introduced.

mmJSPlugin.updateDRM("DRM_PROTECTION", "DRM_LEVEL");

Step 5.7: Report Network Information:

var networkInfo = {
    "cdn": "CDN",
    "asn": asn,                     //Integer Value
    "hostName": "SOURCE_HOST_NAME",
    "networkType": "NETWORK_TYPE",  // Network Connection Type
    "networkOperator": "NETWORK_OPERATOR"
}
mmJSPlugin.reportNetworkInfo(networkInfo);

Use the reportNetworkInfo API to report the CDN along with other network information. If additional network information is not available, use reportCDN instead.

Step 5.8: Report CDN Information:

mmJSPlugin.reportCDN("CDN");

Step 5.9: Report Encoding Service:

mmJSPlugin.reportEncodingService("ENCODING_SERVICE");

Step 6: Chunk/Segment Information

Step 6.1: Report Download Rate:

Report the latest chunk download rate using this method. Trigger this method for every chunk.

mmJSPlugin.reportDownloadRate(downloadRate);    //Integer Value in bps (bits per second

Step 7: Player Events

Step 7.1: Report Player State:

mmJSPlugin.reportPlayerState(MMPlayerState.PLAYING);

Enum: MMPlayerState
- PLAYING
- PAUSED
- STOPPED

Step 7.2: Report Buffering:

mmJSPlugin.reportBufferingStarted();
mmJSPlugin.reportBufferingCompleted();

Step 7.3: Report Seek:

mmJSPlugin.reportPlayerSeekStarted(); 
mmJSPlugin.reportPlayerSeekCompleted(seekEndPositionInMS); //Integer Value in Milli Seconds

Step 7.4: Report Error:

mmJSPlugin.reportError("ERROR_CODE", "ERROR_MESSAGE", "ERROR_DETAILS");

Step 7.5: Report Warning:

mmJSPlugin.reportWarning("WARNING_CODE", "WARNING_MESSAGE", "WARNING_DETAILS");

Step 7.6: Report Playback Position:

Call this every 0.5 sec or 1 sec to report the playback position from the player

mmJSPlugin.reportPlaybackPosition(playback_position); //Integer Value in Milli Seconds

Step 7.7: Report Player Resolution:

Step 8: Fallback & Request Status

Step 8.1: Report Fallback Event:

mmJSPlugin.reportFallbackEvent("FALLBACK_MANIFEST_URL", "DESCRIPTION");

Step 8.2: Report Request Status:

var requestInfo = {
    id: "ID",
    error: "ERROR",
    text: "TEXT",
    hostname: "HOSTNAME",
    url: "URL",
    ...
}

mmJSPlugin.reportRequestStatus(RequestStatus.FAILED, "REQUEST_TYPE", requestInfo);

Enum: RequestStatus
- FAILED
- CANCELLED

Step 9: Ad Data & Ad Events

Step 9.1: Report Ad Break Start & End:

mmJSPlugin.reportAdBreakStart();
mmJSPlugin.reportAdBreakEnd();

Step 9.2: Report Ad Data, Ad Start & End:

var adInfo = {
    "adTitle": "AD_TITLE",
    "adId": "AD_ID",
    "adUniversalId": "AD_UNIVERSAL_ID",
    "adCreativeId": "AD_CREATIVE_ID",
    "adCreativeType": "AD_CREATIVE_TYPE",
    "adClient": "AD_CLIENT",
    "adPosition": "AD_POSITION",               //pre, mid, post
    "adServer": "AD_SERVER",
    "adResolution": "AD_RESOLUTION",
    "adUrl": "AD_URL",
    "adDuration": ad_duration,              //Double Value
    "adPodIndex": pod_index,                //Integer Value
    "adPositionInPod": ad_position_in_pod,  //Integer Value
    "isBumper": is_bumper                   //Boolean Value
}

mmJSPlugin.reportAdStart(adInfo);
mmJSPlugin.reportAdEnd();

AdInfo Object description

adInfo.adTitle	String	The title or name of the ad, usually provided in the VAST metadata or by the ad server.
adInfo.adId	String	A unique identifier for the ad creative, often defined by the ad server or DSP.
adInfo.adCreativeId	String	The creative ID associated with the specific ad asset (video, image, etc.). Helps in tracking and reporting creative-level performance.
adInfo.adCreativeType	String	The format or type of the ad creative. For example, video/mp4, image/jpeg, etc., or linear, non-linear.
adInfo.adClient	String	The SDK or client library responsible for requesting and playing the ad. Example: Google IMA, Freewheel, SpotX.
adInfo.adPosition	String	The timing of the ad in relation to the main content: "pre" (before), "mid" (during), or "post" (after).
adInfo.adServer	String	The ad server or source that delivered the ad. Example: Google Ad Manager, Freewheel, etc.
adInfo.adResolution	String	The resolution of the ad video (e.g., 1920x1080), useful for reporting and quality monitoring.
adInfo.adUrl	String	The URL from which the ad video is fetched. Typically a media file or stream URL.
adInfo.adDuration	Integer	The total duration of the ad, in milliseconds. Example: 30000 = 30 seconds.
adInfo.adPodIndex	Integer	The index of the ad pod within the stream. Ad pods are groups of ads played together (like a commercial break).
adInfo.adPositionInPod	Integer	The position of the ad within its pod (e.g., 1st ad, 2nd ad in the group).
adInfo.adPodLendth	Integer	The total number of ads in the current pod. Useful for showing “Ad 2 of 5” type of UI.
adInfo.isBumper	Boolean	A boolean (true/false) indicating whether the ad is a bumper ad (short ad, usually <6s, played at the start or end of ad breaks).

Step 9.3: Report Ad Buffering:

Use Ad Buffering APIs to report any buffering that occurs during ad playback. For any buffering event, either content buffering or ad buffering should be reported, but not both.

mmJSPlugin.reportAdBufferingStrated();
mmJSPlugin.reportAdBufferingCompleted();

Step 10: Custom Events

The Custom Events API can be used to report events that are not covered by the default MediaMelon-supported events. Custom events must be reported within the SDK activity lifecycle. Events reported before SDK initialization or after session end will be ignored. Please refer to the guidelines and constraints below.

mmJSPlugin.reportCustomEvent("EVENT_NAME", "EVENT_VALUE");

Guidelines & Constraints

• Event Name

  • Maximum length: 35 characters

  • Allowed characters: Alphanumeric and underscore (_) only

  • Special characters are not supported

  • Recommended format: UPPERCASE with underscores (e.g., DRM_CHANGE)

• Event Limits

  • A maximum of 35 custom events per session is allowed.

Custom events that violate these constraints (invalid event name or exceeding the per-session limit) will be dropped. Event values exceeding 1000 characters will be truncated to 1000 characters.

Release Notes

Current Release

v2.1.0

• Added support for multiple player instances within a single application.

• Added the following new metadata fields:

  • Player ID - report it using reportPlayerId.

  • DRM Level - report it as part of Content Metadata.

  • Ad Universal ID - report it as part of Ad Info.

• updateDRMType(drmType) → Deprecated

  • Use updateDRM(drmProtection, drmLevel) (refer to Step 5.6)

• Buffering events exceeding the stats interval are now included in the stats payload.

• Updated metadata lifecycle handling:

  • Step 2 metadata fields persist across the SDK instance lifecycle.

  • All Metadata fields from Step 3 are reset for every playback session.

---

Previous Releases

Non-Multiplayer Releases