Getting Started

Configuration of the lura player react native is very straight forward and on point. After following the steps shown in Embedding the Lura Player, you can start exploring the configuration options.

The configuration properties for the LuraPlayer component are described in this section. You can check for the prop types in your development environment by importing LuraPlayerProps interface from lura-react-native-core.

Basic Example

import React, { useRef } from "react";
import { LuraPlayer, LuraPlayerProps } from "lura-react-native-core";

export default function MySampleComponent() {
  const playerRef = useRef<LuraPlayer>(null);

  const config = {
    token: "<TOKEN_FROM_MCP>",
  };

  return (
    <View>
      <LuraPlayer ref={playerRef} config={config} />
    </View>
  );
}

LuraPlayer Config Props

Field	Type	Required	Description
ref	React.RefObject	Yes	Mutable ref object whose .current property will be LuraPlayer. Use the ref object to call methods in the player. (Ex: ref.current?.play();)
style	StyleProp<ViewStyle>	No	Used for styling the video component.
token	string	Yes if no url or playlist	Used to set the video source. You can either use the JWT you get from MCP or URL to set the video source. We would recommend using token for activating the remote config and TVE services such as metadata lookup, schedule, geo station check and parental control.
url	string	Yes if no token or playlist	Used to set the video source. You can either use the JWT you get from MCP or URL to set the video source. We would recommend using token for activating the remote config and TVE services such as metadata lookup, schedule, geo station check and parental control.
format	"hls", "dash" or "mp4"	No	Play format of the video. Sometimes, the play URL does not contain data about whether the video is HLS or DASH. In this case, the format attribute is used.
playlist	Array<LuraPlayerProps>	Yes if no token or url	Array of media info objects composed of url and additional parameters
autoplay	boolean	No	Autoplay mode
title	string	No	Used for overriding the existing title from metadata/specifying the title for external video url or setting a title.
description	string	No	Description of the content. (not necessary for token flow)
poster	string	No	Poster image URL (used in the absence of a default poster image or for overriding the one coming with the metadata)
muted	boolean	No	Whether to start muted attribute of the player. Default is false
volume	number	No	Volume betwen 0.0 and 1.0 (Default is 1.0)
preferredDrm	("widevine" | "fairplay" | "playready")[]	No	Preferred DRM (only if client supports that DRM)
fairplayCertificate	string	No	Certificate string for FairPlay DRM
licenseUrl	string	No	DRM license URL
ui	"auto" | "none"	No	UI of the Lura Player. If you want to disable the user interface, pass "none", otherwise "auto" will be used as default.
playbackSpeed	number	No	Used to change the playback rate of the playing video. (Default is 1.0)
plugins	PLUGIN_NAME : PLUGIN_CONFIG_OBJ	No	Lura Player Plugins

Example code:

import React, { useRef } from "react";
import { LuraPlayer, LuraPlayerProps } from "lura-react-native-core";

export default function MySampleComponent() {
  const playerRef = useRef<LuraPlayer>(null);

  const config = {
    token:
      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg",
    poster: "https://picsum.photos/640/360",
    autoplay: true,
    muted: true,
    plugins: {
      ima: {
        adTagUrl:
          "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=[correlator]",
      },
    },
  };

  return (
    <View>
      <LuraPlayer ref={playerRef} config={config} />
    </View>
  );
}