React Player SDK with IMA

This guide provides detailed instructions on integrating the MediaMelon IMA SDK with the React Player

Step 1: Prerequisites

Step 2: Set up the build environment

Step 3: Import Packages

Step 4: Register and Initialise SDK

Step 5: Report Ad Information

Step 6: Report Ad Events

Step 7: MMAdState

Step 8: Variables and Description

Step 1: Prerequisites

• React Player Application.

• MediaMelon SmartSight SDK mmsmartstreaming_reactplayer.min.js file is necessary.

Step 2: Set up the build environment

Using NPM:

npm i mediamelon-react-sdk

Step 3: Import Packages

Using NPM:

import {MMReactPlayerSDK, MMIMAAdapter, MMAdState, MMAdInfo} from 'mediamelon-react-sdk';

Using JS file:

import {MMReactPlayerSDK, MMIMAAdapter, MMAdState, MMAdInfo} from './mmsmartstreaming_reactplayer.min.js'

Step 4: Register and Initialise SDK

The SDK must be initialised at the start of each video session. Initialisation includes setting the application context, initialising the playback session, and indicating the intent for playback with the SDK.

The enableLogTrace feature should be enabled for testing during the integration process. Set this to False before releasing the player to production.

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

Wrap your Video component with the MMReactPlayerSDK.

const MMReactPlayerSDK = MMReactPlayerSDK(ReactPlayer);

<MMReactPlayerSDK
  ref={this.ref}
  playerRef={this.player}
  className='react-player'
  width='100%'
  height='100%'
  url={url}
  ...
  mmOptions={{
    register: {
      customerId: 'CUSTOMER_ID',      
      subscriberId: 'SUBSCRIBER_ID',   
      subscriberType: 'SUBSCRIBER_TYPE',
      subscriberTag:'SUBSCRIBER_TAG',  
      playerName: 'PLAYER_NAME',
      playerBrand:"PLAYER_BRAND",
      playerModel:"PLAYER_MODEL",
      playerVersion:'PLAYER_VERSION',
      basePlayerName: "BASE_PLAYER_NAME",
      basePlayerVersion: "BASE_PLAYER_VERSION",
      experimentName: "EXPERIMENT_NAME",
      subPropertyId: "SUB_PROPERTY_ID",
      viewSessionId: "VIEW_SESSION_ID",
      domainName: 'DOMAIN_NAME',
      applicationName: 'APP_NAME',            
      applicationVersion: 'APP_VERSION',      
      deviceMarketingName:'DEVICE_MARKETING_NAME'
    },
    contentMetadata: {
      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',                  
      isLive: false,
    },
    customTags:{
      "KEY1": "VALUE_STRING1",
      "KEY2": "VALUE_STRING2"
    },
    enableLogTrace:false
  }}
/>

Step 5: Report Ad Information

const mmAdAdapter = MMIMAAdapter();

const sdkAdInfo = MMAdInfo();
sdkAdInfo.adClient = "AD_CLIENT";
sdkAdInfo.adId = "AD_ID";
sdkAdInfo.adCreativeId = "CREATIVE_ID";
sdkAdInfo.adUrl = "AD_URL";
sdkAdInfo.adTitle = "AD_TITLE";
sdkAdInfo.adServer = "AD_SERVER";
sdkAdInfo.adCreativeType = "AD_CREATIVE_TYPE";
sdkAdInfo.adDuration = <ad_duration_in_seconds>;
sdkAdInfo.adPodLength = <ad_pod_length>;
sdkAdInfo.adIsLinear = <is_ad_linear_boolean>;

mmAdAdapter.reportAdInfo(sdkAdInfo);

Step 6: Report Ad Events

mmAdAdapter.reportAdEvent(<MMAdState>);

Step 7: MMAdState

MMAdState Enum has the following fields:

• AD_REQUEST

• AD_IMPRESSION

• AD_PLAY

• AD_PLAYING

• AD_MIDPOINT

• AD_FIRST_QUARTILE

• AD_THIRD_QUARTILE

• AD_CLICKED

• AD_PAUSED

• AD_RESUMED

• AD_SKIPPED

• AD_ENDED

• AD_COMPLETED

• AD_ERROR

• AD_BLOCKED

• AD_BUFFERING