Custom Player Web SDK

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

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 [email protected]

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);