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:
Use this command in your terminal:-
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:
Using JS file:
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 customer-support@mediamelon.com.
Wrap your Video
component with the mmReactNativeVideo
.
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
andonPlay
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.
Last updated