Cordova Plugin Toast (Smart TV)

This guide is for integrating the MediaMelon Player SDK for the javascript based Cordova Plugin Toast (Tizen, WebOS, Orsay)

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

js/media.js:

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

function playMedia() {
    .....
    .....
    document.body.appendChild(bgContainer);

    // MediaMelon Start
    toastMMPlugin = new ToastJsMMSSIntgr();
    if(toastMMPlugin.getRegistrationStatus() === false){
        toastMMPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE" , "SUBSCRIBER_TAG");
        toastMMPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", "PLAYER_VERSION");
    }
    var mediaSourceURL = 'http://media.w3.org/2010/05/sintel/trailer.mp4'';
    // MediaMelon End
    
    media = toast.Media.getInstance();
    media.open(mediaSourceURL);

You can also provide the Content Metadata like assetID, assetName, videoID, and custom tags as shown below while setting source information. Please use the mmVideoAssetInfo structure to provide this information.

And then initialize as shown below:

.....
 addControlBar();
    
    // MediaMelon Start (Content Metadata)
      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"
            }
          };

    toastMMPlugin.initialize(mediaSourceURL, mmVideoAssetInfo);
    // MediaMelon End
    
    media.setListener({
        onevent: function(evt) {
        
        // MediaMelon Start
        toastMMPlugin.onToastEvent(evt);
        // MediaMelon End
         
            switch(evt.type) {
                case 'STATE':
.....

Add the call for reporting error to the Toast Plugin and just before media.play(), call the reportUserInitiatedPlayback()api.

.....
        },
        onerror: function (err) {
            console.error('MediaError is occured: ' + JSON.stringify(err));
            document.getElementById('log').innerHTML = 'MediaError is occured';
            // MediaMelon Start
            toastMMPlugin.onToastError(err);
            // MediaMelon End
        }
    });
    
    // MediaMelon Start
    toastMMPlugin.reportUserInitiatedPlayback();
    // MediaMelon End
    media.play();
    //You don't have to call setScreenSaver Method. It is configurated by toast.avplay.
}
.....

Step 3: Toast Level Changes for Bitrate Support

toast.js:

Please make the following changes toast.js for supporting bitrate change notifications. (Applicable for sectv-tizen platform only.)

Add the Media Events:

.....
Media.EVENT_SUBTITLE = 'SUBTITLE';
Media.EVENT_ENDED = 'ENDED';

// MediaMelon Start
Media.EVENT_BITRATE_CHANGE = 'BITRATE_CHANGE';
Media.EVENT_RESOLUTION_CHANGE = 'RESOLUTION_CHANGE';
Media.EVENT_TRACKINFO_CHANGE = 'TRACKINFO_CHANGE';
// MediaMelon End
//Media.MEDIA_SUBTITLE = 5;

.....

Add the respective Media Event handling in Media.mediaEvent() function:

.....
       case Media.EVENT_SUBTITLE :
            media._mediaEventCallBack.onevent && media._mediaEventCallBack.onevent(value);
            break;
            
        // MediaMelon Start
        case Media.EVENT_BITRATE_CHANGE :
            media._mediaEventCallBack.onevent && media._mediaEventCallBack.onevent(value);
            break;
        case Media.EVENT_RESOLUTION_CHANGE :
            media._mediaEventCallBack.onevent && media._mediaEventCallBack.onevent(value);
            break;
        case Media.EVENT_TRACKINFO_CHANGE :
            media._mediaEventCallBack.onevent && media._mediaEventCallBack.onevent(value);
            break;
        // MediaMelon End
        
        case Media.EVENT_ENDED :
            media.stop();
.....

Add the following code in the getMediaEventValue() function:

.....
    case Media._MEDIA_ERROR :
        reval = {
            'type': type,
            'data': data
        };
        break;
        
    // MediaMelon Start
    case Media.EVENT_BITRATE_CHANGE :
        reval = {
            'type': type,
            'data': {
                'currentBitrate': data
            }
        };
        break;
    case Media.EVENT_RESOLUTION_CHANGE :
        reval = {
            'type': type,
            'data': {
                'currentResolution': data
            }
        };
        break;
    case Media.EVENT_TRACKINFO_CHANGE :
        reval = {
            'type': type,
            'data': {
                'trackInfos': data
            }
        };
        break;
    // MediaMelon End
    
    }
    return reval;
}
.....

Add the following code in the open: function(successCallback, errorCallback, args) function:

.....
  oncurrentplaytime: function(currentTime) {
                    if(currentMediaState !== Media.STATE_PLAYING && currentTime > 0) {
                        Media.mediaEvent(id,getMediaEventValue(Media.EVENT_STATE,Media.STATE_PLAYING));
                    }
                    console.log('media::Current playtime: ' + currentTime);
                    Media.mediaEvent(id,getMediaEventValue(Media.EVENT_POSITION,currentTime));
                },
                onevent: function(eventType, eventData) {
                    console.log('media::Event type error: ' + eventType + ', eventData: ' + eventData);
                    
                    // MediaMelon Start
                    if (eventType === 'PLAYER_MSG_BITRATE_CHANGE') {
                        let currentBitrate = eventData.split(':')[1];
            		    console.log("MMSS Bitrate: " + currentBitrate);
                        Media.mediaEvent(id,getMediaEventValue(Media.EVENT_BITRATE_CHANGE,currentBitrate));
                    } else if (eventType === 'PLAYER_MSG_RESOLUTION_CHANGED') {
                        //Media.mediaEvent(id,getMediaEventValue(Media.EVENT_RESOLUTION_CHANGE,currentTime));
                    }
                    // MediaMelon End
                    
                },
                onerror: function(errorData) {
                    console.log('media::Event type error: ' + errorData);
                    Media.mediaEvent(id,getMediaEventValue(Media._MEDIA_ERROR,errorData));
                },
              .....
              .....
              .....
       function playMedia() {
            webapis.avplay.prepareAsync(function() {
              .....
              .....
                        }
                        /*jshint camelcase: true */
                        /*jscs:enable requireCamelCaseOrUpperCaseIdentifiers*/
                    }
                }
                
                // MediaMelon Start
                var totalTracks = webapis.avplay.getStreamingProperty("AVAILABLE_BITRATE");
                var bitrate_arr = totalTracks.split(":");
                var trackInfo = [];
                for(var i=0 ; i < bitrate_arr.length; i++){
                    trackInfo.push({'bitrate': bitrate_arr[i]});
                }                
                Media.mediaEvent(id,getMediaEventValue(Media.EVENT_TRACKINFO_CHANGE, trackInfo));
                // MediaMelon End
                
                Media.mediaEvent(id, getMediaEventValue(Media.EVENT_STATE, Media.STATE_PLAYING));
                var duration = webapis.avplay.getDuration();
                .....
                .....

This concludes the changes needed to integrate MediaMelon’s SDK into Samsung and LG SmartTVs using the Cordova Toast plugin.

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.

Last updated