React Native Video v5.2.0 with Mediamelon SDK

This guide provides detailed instructions on integrating the React Native Video MediaMelon SDK with React Native Video v5.2.0 player

Step 1: Prerequisites

Step 2: Set up the build environment

Step 3: Import Packages

Step 4: Register and Initialise SDK

Step 5: Variables and Description

Step 1: Prerequisites

• React native video - v5.2.0 application.

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

Step 2: Set up the build environment

$REACT_NATIVE_PROJECT = {ReactNativeVideo - v5.2.0}

The SDK files should be added to the build environment

Using NPM:

1. Use this command in your terminal:-

npm i mediamelon-reactnative-video@1.0.0

Using JS file:

• Copy mm_react_native_sdk.js provided in the release package to the React native project. Example $REACT_NATIVE_PROJECT/mm_react_native5_sdk.min.js

Step 3: Import Packages

$REACT_NATIVE_PROJECT/App.js

Using NPM:

import mmReactNativeVideo from 'mediamelon-reactnative-video';

Using JS file:

import mmReactNativeVideo from './mm_react_native5_sdk.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 [e-mail].

Wrap your Video component with the mmReactNativeVideo.

const MMPlayer = mmReactNativeVideo(Video);

<MMPlayer
        source={{ uri: 'STREAM_URL' }} 
        style={styles.video} 
        controls={true}  
        resizeMode="contain"
        onLoad = {"HANDEL_ON_LOAD"} // 
        mmOptions={{
          data: {
           application_name: 'APP_NAME',            // (required) the name of your application
           application_version: 'APP_VERSION',      // the version of your application (optional, but encouraged)
           player_name: 'PLAYER_NAME',
           customer_id: 'CUSTOMER_ID',             // (required)
           subscriber_id: 'SUBSCRIBER_ID',
           domain_name: 'DOMAIN_NAME',
           subscriber_type: 'SUBSCRIBER_TYPE',
           subscriber_tag:'SUBSCRIBER_TAG',
           player_brand:"PLAYER_BRAND",
           player_model:"PLAYER_MODEL",
           player_version:'PLAYER_VERSION',
           device_marketing_name:'DEVICE_MARKETING_NAME'
          },
          content_metadata: {                  //optional
            asset_name:'ASSET_NAME',
            asset_id:"ASSET_ID",
            video_Id:"VIDEO_ID",
            content_type:'CONTENT_TYPE',
            genre:'GENRE',
            drm_protection:'DRM_PROTECTION',
            episode_number:'EPISODE_NUMBER',
            season:'SEASON',
            series_title:'SERIES_TITLE',
            video_type:'VIDEO_TYPE',
            is_live: false,
          },
          custom_tags:{                       // optional
            "KEY1": "VALUE_STRING1",
            "KEY2": "VALUE_STRING2"
          },
          enableLogTrace:true,
        }}
/>

Step 5: Variables and Description

Variable	Description	Optional/Mandatory
PLAYER_NAME	String containing the Player Name.	Mandatory
CUSTOMER_ID	String containing your MediaMelon-assigned Customer ID.	Mandatory
SUBSCRIBER_ID	String containing your Subscriber’s ID.	Mandatory
DOMAIN_NAME	String containing your section of your subscriber or assets.	Mandatory
SUBSCRIBER_TYPE	String containing the Subscriber Type (e.g. “Free”, “Paid”).	Optional
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.	Optional
ASSET_ID	String containing Asset Id.	Mandatory
ASSET_NAME	String containing Asset Name.	Mandatory
VIDEO_ID	String containing your video’s ID.	Mandatory
CONTENT_TYPE	String containing type of the Content. For example - "Movie", "Special", "Clip", "Scene" "Episode".	Mandatory
GENRE	String containing Genre of the content. For example - "Comedy", "Horror".	Optional
DRM_PROTECTION	Widevine, Fairplay, Playready etc. Unknown means content is protected, but protection type is unknown. For clear contents, do not set this field	Optional
EPISODE_NUMBER	String containing sequence number of the Episode.	Optional
SEASON	String containing the Season. For example - "Season1".	Optional
SERIES_TITLE	String containing Title of the Series.	Optional
VIDEO_TYPE	String containing Video Type. For example - "LIVE", "VOD".	Optional
PLAYER_BRAND	String containing Player Brand (e.g. “Exo Player”).	Mandatory
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.	Mandatory
PLAYER_VERSION	String containing Player Version.	Mandatory
CUSTOM_METADATA	Extra custom metadata can be added here if required.	Optional
hashSubscriberId	To hash the subscriber Id set this boolean variable to true, else set it to false.	Optional
player	Player Object.	Mandatory
streamURL	Current playing content stream URL.	Mandatory
isLive	Set this boolean variable to true if the content is Live else set it to false for VOD content.	Optional

Limitations

Android:

• onPause and onPlay events are not automatically triggered.

• onBuffer events are also not working as expected.

• To work around this, you can use ExoPlayer with Android, which will allow you to manually emit these events. Please refer to the React Native Video documentation for additional details and event handling.

iOS:

• The onSeek event is currently not working.