MediaMelon
  • MediaMelon SDK Integration
  • MediaMelon SDK Events
  • MediaMelon Player SDK Integration
    • React Native
      • React Native Video v5.2.0 with Mediamelon SDK
      • React Native Video v6.4.2 with Mediamelon SDK
    • Web SDK
      • VideoJS Web with Mediamelon Analytics
      • VideoJS Web with Google DAI
      • Shaka Player Web v4
      • MediaMelon Web Kaltura Player Plugin Integration Document
      • NexPlayer Web v4
      • THEOPlayer Web
      • JWPlayer Web
      • Radiant Player Web
      • ChromeCast Player
      • HLSJS Player Web
      • HbbTV SDK
      • Comcast PDK 6
      • Bitmovin Web Player
      • HTML5 Player Web
      • Flow Player Web
      • DashJS Player Web
      • Castlabs Player Web
      • Cordova Plugin Toast (Smart TV)
      • Custom Player Web SDK
      • Plyr Player Web with MediaMelon Analytics
      • React Player SDK with IMA
    • Android SDK
      • App Analytics SDK
      • Bitmovin Android v3.73 with Content Provider Metrics
      • Exoplayer v2.13.2 integration with MediaMelon SDK
      • Exoplayer v2.17.1 with Mediamelon SDK
      • Exoplayer v2.12.2 integration with MediaMelon SDK
      • EXOPlayer-Android(V2.14.2) MediaMelon SDK with Google IMA DAI
      • EXOPlayer-Android(V2.17.1) MediaMelon SDK with Google IMA DAI
      • Exoplayer v2.11
      • Exoplayer v2.18.1 with Mediamelon SDK
      • Theoplayer v6.0.0 with Mediamelon SDK
      • Theoplayer v4.12.6 with Mediamelon SDK
      • Theoplayer v7.5.0 with Mediamelon SDK
      • Exoplayer v2.13.3 integration with MediaMelon SDK
      • Kaltura Android Player Integration with Mediamelon SDK
      • Media3 v1.3.0 and ExoPlayer 2.19.1 with MediaMelon SDK
      • Media3 v1.3.1 with MediaMelon SDK
      • MediaMelon Android Media3 v1.1.1 SDK Integration Document
      • Media3Player-Android(V1.3.0) MediaMelon SDK with Google IMA
    • Roku SDK
      • Roku SDK
      • Roku with RAF SDK
      • Roku with IMA SDK
    • iOS SDK
      • AVPlayer (Cocoapods)
      • AVPlayer with Google DAI SDK ( Framework )
      • AVPlayer Quality Of Experience SDK
      • AVPlayer Generic Framework
      • AVPlayer with Google DAI (Cocoapods)
      • Bitmovin iOS v3.44 with Content Provider Metrics
      • THEOPlayer XCFramework
      • THEOplayer (Cocoapods)
      • MediaMelon iOS Kaltura Player Plugin Integration Document
    • tvOS SDK
      • AVPlayer tvOS XCFramework
      • THEOPlayer tvOS XCFramework
    • Toast SDK
    • Custom Player C++ SDK
    • C++ SDK QoE Ads
    • Ad Integrations
      • Google IMA
      • FreeWheel
      • ServerSide.AI
  • SmartSight Analytics
    • Product Features
    • QBR Streaming
  • SmartSight API's
    • API Overview
      • Metric and Dimensions Dictionary
      • General Guidelines
      • Video Experience
      • Ad Experience
      • Smartquery Insights
      • Errors
      • Alerts
    • Use-case dictionary
Powered by GitBook
On this page
  • Step 1: Add the MediaMelon SDK Files
  • Step 2: Register and Initialize the MediaMelon Player SDK
  • Step 3: API to Report Video Progress
  • Step 4: APIs that can be Triggered when Required

Was this helpful?

  1. MediaMelon Player SDK Integration
  2. Web SDK

Custom Player Web SDK

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

PreviousCordova Plugin Toast (Smart TV)NextPlyr Player Web with MediaMelon Analytics

Last updated 1 year ago

Was this helpful?

Step 1: Add the MediaMelon SDK Files

Add the following lines to the web page before player files are loaded.

  <script type="text/javascript" src="https://PATH_TO_MEDIAMELON_SDK/mmsmartstreamingsdk.min.js"></script>

Step 2: Register and Initialize the MediaMelon Player SDK

<customer_id> as your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at

After the player instance has been created, create a new Plugin object, register, report player Info, and then initialize the plugin as shown below:

var customPlugin = new mmCustomJSAdapter();

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

if(customPlugin.getRegistrationStatus() === false){
 customPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE" , "SUBSCRIBER_TAG");
 customPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", "PLAYER_VERSION");
}
 
customPlugin.reportAppInfo("APP_NAME", "APP_VERSION");
customPlugin.setDeviceInfo("DEVICE_ID", "DEVICE_MARKETING_NAME");
customPlugin.reportVideoQuality("VIDEO_QUALITY");

customPlugin.reportPresentationInfo(presentationType, presentationArray);

var isLive = false;    //Set this to true for a live stream or false for a VOD stream
customPlugin.initialize(mmVideoAssetInfo, streamURL, totalDuration, isLive);

Note: Presentation Info API

This API should send all the available video and audio qualities and it requires two parameters: presentationType and presentationArray. Variable presentationType is a Enum which describes whether the data is of Video or Audio.

Presentation Array Structure:

[
    {
        "codec": "avc1.42001e",
        "bandwidth": 493000,
        "width": 224,
        "height": 100 
    },
    {
        "codec": "avc1.640028",
        "bandwidth": 2468000,
        "width": 1680,
        "height": 750 
    }
]

Enum values and their descriptions for the presentationType variable are as below;

Enum value
Description

PRESENTATIONTYPE.VIDEO

If the presentation data is about video track then send this enum value in the API

PRESENTATIONTYPE.AUDIO

If the presentation data is about audio track then send this enum value in the API

Step 3: API to Report Video Progress

This API should be triggered every 1 second. It requires an object as a parameter that contains information like playback position, current bitrate, and resolution in the form of width & height. The same API should be used for content progress reporting and Ad progress reporting.

var progressObject = {
    "playbackPosition": 10, //playback position should be in milliseconds
    "bitrate": 12000,
    "width": 208,
    "height": 100
}
customPlugin.reportTimeUpdate(progressObject);

Step 4: APIs that can be Triggered when Required

Report State:

Trigger this API when a state change occurs in the player. This API requires an Enum value as a parameter that represents the current state of the player or the action that happened to the player.

var state = PLAYERSTATE.PLAYING;
customPlugin.reportStateChange(state);

Enum values that can be sent as a parameter in the reportStateChange API as described below;

Enum Value
Description

PLAYERSTATE.MANIFEST_LOAD_START

When the manifest load started. Not required if the video doesn't support manifest.

PLAYERSTATE.MANIFEST_LOAD_COMPLETE

When the manifest load is completed successfully.

PLAYERSTATE.PLAYING

When the video starts playing. It might be the first play or play after a pause.

PLAYERSTATE.PAUSE

When the video is paused.

PLAYERSTATE.SEEK_START

When the video seek starts.

PLAYERSTATE.SEEK_COMPLETE

When the video seek completes.

PLAYERSTATE.BUFFER_START

When the video buffering starts.

PLAYERSTATE.BUFFER_COMPLETE

When the video buffering completes.

PLAYERSTATE.ENDED

When the video is ended.

PLAYERSTATE.AD_BREAK_STARTED

When the Ad break started.

PLAYERSTATE.AD_IMPRESSION

When the Ad impression occurs.

PLAYERSTATE.AD_STARTED

When the Ad started.

PLAYERSTATE.AD_FIRST_QUARTILE

When Ad reached 25% of its duration.

PLAYERSTATE.AD_MIDPOINT

When Ad reached 50% of its duration.

PLAYERSTATE.AD_THIRD_QUARTILE

When Ad reached 75% of its duration.

PLAYERSTATE.AD_SKIPPED

When Ad skipped.

PLAYERSTATE.AD_CLICKED

When Ad clicked.

PLAYERSTATE.AD_COMPLETED

When Ad completed.

PLAYERSTATE.AD_STOPPED

When the Ad stopped in between without completion.

PLAYERSTATE.AD_BREAK_STOPPED

When the Ad break ended.

Report Ad Data:

Trigger this API to report the Ad data before an Ad break. This API requires a adTimelineArray parameter that should contain all the Ad details of the upcoming Ad break.

If the upcoming Ad break contains 4 Ads then the adTimelineArray should contain all 4 ad details.

var adTimelineArray = [
    {
        "adClient": "mmAds-Nowtilus",
        "adId": "11023407",
        "adDuration": 15000,    // Ad duration should be in milliseconds
        "adPosition": ADPOSITION.MID,
        "adLinear": "linear",
        "adCreativeType": "hls",
        "adSystem": "SMART AdServer",
        "isBumper": false,
        "adTitle": "Washing Machine Ad",
        "adUrl": "adurl.com",
        "adCreativeId": "14738"
    }
];

customPlugin.reportAdTimelineData(adTimelineArray);

Enum values and descriptions for ADPOSITION are mentioned below;

Enum
Description

ADPOSITION.PRE

Represents pre Ad break

ADPOSITION.MID

Represents mid Ad break

ADPOSITION.POST

Represents post Ad break

Report Error:

Trigger this API when an error occurs in the player, content, Ad, or application. This API requires three parameters that are error message, error code, and error type.

var errorType = ERRTYPE.FATAL;
customPlugin.reportError("ERROR_MESSAGE", "ERROR_CODE", errorType);

Enum values and their descriptions for the error type variable are as below;

Enum value
Description

ERRTYPE.FATAL

If the error type is fatal

ERRTYPE.WARNING

If the error type is warning

Report Track:

Trigger this API when a track change occurs in Audio, Video, or Subsitle tracks. This API requires two parameters: track type and current track.

Also, trigger this API when the video starts playing to report initial Audio, Video, and Subtitle tracks.

var trackType = TRACK.AUDIO;
customPlugin.reportTrackChange(trackType, "CURRENT_TRACK");

Enum values and their descriptions for the track type variable are as below;

Enum Value
Description

TRACK.SUBTITLE

If reporting the subtitle track information, send this as the trackType.

TRACK.AUDIO

If reporting the audio track information, send this as the trackType.

TRACK.VIDEO

If reporting the video track information, send this as the trackType.

Report Volume:

Trigger this API when a volume change occurs in the player. Send the volume value in percentage as shown below;

customPlugin.reportVolumeChange(76);
support@mediamelon.com