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-by-Step integration guide.
  • Application-level changes
  • Toast-level changes

Was this helpful?

  1. MediaMelon Player SDK Integration

Toast SDK

This guide is for integrating the MediaMelon Player SDK with theToast Cordova Plugin for Smart TV platforms.

PreviousTHEOPlayer tvOS XCFrameworkNextCustom Player C++ SDK

Last updated 1 year ago

Was this helpful?

The following platforms are supported via the Toast Plugin:

  1. sectv-orsay [Samsung]

  2. sectv-tizen [Samsung]

  3. tv-webos [LG]

For the rest of this guide, the sample media application from the link below is taken as the reference media app.

Github link for media app used for integration :

https://github.com/Samsung/cordova-plugin-toast/tree/master/sample/media

Please note that all the code changes that need to be made are shown below and indicated by the tags MediaMelon Start and MediaMelon End. Snippets of surrounding code is also provided to act as placeholders and to help you find the right place to insert MediaMelon’s integration code.

Fig 1 describes how the Toast plugin integrates and interacts with the underlying SmartTV platforms (Samsung or LG). Toast is an abstraction layer that makes it simple to write applications for Samsung and LG SmartTVs using a common set of APIs.

The top-most layer in Fig 1 shows the application layer where you can write your apps using Toast’s APIs. In this layer, MediaMelon Player SDK is integrated making it a single integration step irrespective of the underlying SmartTV platform.

In the middle layer, there are platform-specific Toast files which the top-level APIs interact with. Here, certain MediaMelon-specific changes are needed to propagate events and metrics that are not passed-through by Toast.

The final level is the platform level (specific to each SmartTV platform) and this is un-touched by Media Melon’s SmartSight Player SDK integration.

Step-by-Step integration guide.

  1. Github links for working with Cordova Toast Plugin :

Getting- started scripts for automatic/quick setup:

2. The following changes/additions are to be made in order to integrate with MediaMelon SmartSight Player SDK:

At the application level:

1) www/index.html

2) js/media.js

At the Toast level

1) toast.js [sectv-tizen platform only]

Application-level changes

→ www/index.html:

Include <mmsmartstreaming-toast-sdk.js> in the index.html. We use a wrapper to load the SDK - so that, if there is an error in loading the SDK, the application will not be affected and playback will continue.

......
<body>
        <div class="app">
            <h1>The sample app for Media</h1>
   ......
   ...... 
// MediaMelon Start
<script type="text/javascript">

            function mmsdkLoaderScript(scriptUrl) {
                    return new Promise(function (res, rej) {
                            var script = document.createElement('script');
                            script.src = scriptUrl;
                            script.type = 'text/javascript';
                            script.onError = rej;
                            script.async = true;
                            script.onload = res;
                            script.addEventListener('error', rej);
                            script.addEventListener('load', res);
                            document.head.appendChild(script);
                        });
            }

            var event = mmsdkLoaderScript("mmsmartstreaming-toast-sdk.min.js").then(function () {
            console.log("MediaMelon Toast SDK loaded");
            })["catch"](function () {
            console.log("MediaMelon Toast SDK error");
            });
</script>
// MediaMelon End
	
        <script type="text/javascript" src="js/init.js"></script>
        <script type="text/javascript" src="js/media.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="toast.js"></script>
</body>

→js/media.js:

Add the toastMMPlugin variable

.....
var jumpNum = 10000;
var fullResolution = ['0%', '0%', '100%', '100%'];
var partialResolution = ['25%', '25%', '50%', '50%'];

// MediaMelon Start
var toastMMPlugin = undefined;
// MediaMelon End
.....

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.reportAppInfo("<app_name>", "<app_sdk_version>");
        toastMMPlugin.setDeviceInfo("<device_marketing_name>");
        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 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
    var mmVideoAssetInfo = {
                    "assetName":"ASSETNAME_STRING",
                    "assetId": "ASSETID_STRING",
                    "videoId": "VIDEOID_STRING",
                    "contentType": "Genre of the content (episode, movies, etc)",
		    "drmProtection": "DRM type used (Widevine, Playready, etc)",
	            "episodeNumber": "Episode Number, e.g., 2 or E2",
		    "season":"Season number of the Series Title, e.g, 2 or S2",
		    "seriesTitle": "Series Title",
                    "customTags":{
                        "key1": "VALUE_STRING1",
                        "key2": "VALUE_STRING2",
                        "key3": "VALUE_STRING3"
                    }
                  }

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

Toast-level changes

→ 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


.....

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));
                    }
                    .....
                    // 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() {
              .....
              .....
                        }
                    }
                }
                
                // 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();
                .....
                .....

GitHub - Samsung/cordova-plugin-toast: Cordova plugin that provides TV Specific functionalities.
https://github.com/Samsung/cordova-plugin-toast/tree/master/script