Manage the player with the Wowza Flowplayer React Native SDK

This page describes how you can dispatch different actions or methods to control and manage media playback from the player.

The Wowza Flowplayer React Native SDK provides two different ways to send events to the player component so it can perform an action. The first way utilizes the FlowplayerRef type to reference the component, while the second way relies on React context.

info

Regardless of which method you use to work with the player, when rendering the <FlowplayerView /> component, the ref property is mandatory. You must always pass a reference to the player instance to it as a prop. The <FlowplayerView /> component depends on this ref to render the player UI correctly.

All of the examples on this page are written in TypeScript. For a more complete example, see the App.tsx file in our react-native-sdk-demo repository.

Pass value-based props

The following value-based props can be used to provide the player component with a player reference and to set its style properties for display.

Property	Description
`style?: ViewStyle & CSSProperties;`	Sets the CSS styles for the video player, combining both ViewStyle and CSSProperties from the react-native library.
`ref?: FlowplayerRef`	Sets a reference to the initialized player so you can call certain actions on it. This property is mandatory when rendering the `<FlowplayerView />` component.

For example, you can initialize a player reference and define a JavaScript object for style definitions with the following:

Copy

Copied

const flowplayerRef = useRef<FlowplayerRef>(null);

const styles = StyleSheet.create({
  flowplayer: {
    width: '100%',
    height: 250,
    backgroundColor: '#000000',
    marginTop: '25%',
  },
});

When you render your component, pass that flowplayerRef to the ref property, along with the player styles to the style property:

Copy

Copied

return (
    <FlowplayerView
      ref={flowplayerRef}
      style={styles.flowplayer}
      onViewReady={onViewReady}
    />
  );

Call player actions with a ref

The FlowplayerRef type represents a set of methods to control the video player using a React ref. You can use it with the useRef hook to hold a reference to the player instance, then perform an action when the component mounts. The following actions or methods are available to control the player when using the FlowplayerRef type.

Action	Description
`pause: () => void;`	Pauses the currently playing video.
`play: () => void;`	Initiates video playback.
`prepare: (media: FlowplayerMedia) => void;`	Prepares the media for playback. The `media` parameter specifies the media object to be prepared.
`reload: () => void;`	Reloads the current video.
`seek: (position: number) => void;`	Seeks to a specific time in the video. The `position` parameter represents the number of seconds elapsed from the beginning of the video.
`setAutoplay: (isOn: boolean) => void;`	Enables or disables auto-playing the video. The `isOn` parameter is a boolean indicating if auto-play is enabled (true) or disabled (false).
`setPlaybackRate: (rate: number) => void;`	Sets the playback rate or speed for the player. The `rate` parameter is a decimal value ranging from 0.0 to 2.0.
`setVolume: (volume: number) => void;`	Sets the volume of the video. The `volume` parameter indicates the volume level set, typically between 0 (mute) and 1 (maximum volume).
`stop: () => void;`	Stops the currently playing video.

Example

The following example demonstrates how to initialize a player with a React ref, then call certain actions on that instance of the player. Event handler functions such as onViewReady and onPlay are called in response to events triggered by the video player. Then the prepare, setAutoplay, and setPlaybackRate actions are used to manage the player instance.

Copy

Copied

// Add necessary modules and components to App.tsx
import FlowplayerView, {
  type FlowplayerRef,
  type FlowplayerMedia,
} from '@flowplayer/react-native-sdk';
import React, { useRef } from 'react';
import { StyleSheet } from "react-native";

// Define a constant to load a Wowza video file and its configuration
const VIDEO: FlowplayerMedia = {
  mediaId: '[media-id]',
  playerId: '[player-configuration-id]',
};

// Define a functional component
const MyPlayerComponent: React.FC = () => {
  // Initialize a ref with the useRef hook to hold a reference to the player instance
  const flowplayerRef = useRef<FlowplayerRef>(null);

  // Call when the player view is ready
  const onViewReady = () => {
    // Use the prepare method on flowplayerRef.current if it exists
    // Load the player video and disable auto-play
    flowplayerRef.current?.prepare(VIDEO);
    flowplayerRef.current?.setAutoplay(false);
  };

  // Call when the video plays and set the speed to fast
  const onPlay = () => {
    flowplayerRef.current?.setPlaybackRate(2.0);
  };

  // Render the player and pass the props to the component
  return (
    <FlowplayerView
      ref={flowplayerRef}
      style={styles.flowplayer}
      onViewReady={onViewReady}
      onPlay={onPlay}
    />
  );
};

function App(): JSX.Element {
    return <MyPlayerComponent />;
}

// Style the component
const styles = StyleSheet.create({
  flowplayer: {
    width: '100%',
    height: 250,
    backgroundColor: '#000000',
    marginTop: '25%',
  },
});

Call player actions via React context

When you use React context, you can make data accessible to different application components by passing data through the component tree without passing props manually to every level. With this mechanism, you can access the state and dispatch objects from wherever you are in the component tree with the useFlowplayer() hook.

info

If you use React context to add the player to your UI, you must wrap the <FlowplayerView /> component with <FlowplayerProvider />.

State objects

The following table lists all of the states available to manage and interact with the player.

Player state	Description
`autoplay: boolean;`	Indicates if the player's auto-play feature is enabled.
`hasStopped: boolean;`	Indicates if the player has stopped playing.
`isPlaying: boolean;`	Indicates if the player is currently playing.
`isReloading: boolean;`	Indicates if the player is currently reloading.
`media: FlowplayerMedia \| null;`	Indicates the current media being played.
`playbackRate: number;`	Indicates the player's current playback rate or speed.
`position: number;`	Indicates the player's current playback position, in seconds.
`volume: number;`	Indicates the player's current volume level.

Dispatch objects

The following table lists all of the dispatch functions available to work with the player's context.

Action	Description
`pause: () => void;`	Pauses the currently playing video.
`play: () => void;`	Initiates video playback.
`prepare: (media: FlowplayerMedia) => void;`	Prepares the media for playback. The `media` parameter specifies the media object to be prepared.
`reload: () => void;`	Reloads the current video.
`seek: (position: number) => void;`	Seeks to a specific time in the video. The `position` parameter represents the number of seconds elapsed from the beginning of the video.
`setAutoplay: (isOn: boolean) => void;`	Enables or disables auto-playing the video. The `isOn` parameter is a boolean indicating if auto-play should be enabled (true) or disabled (false).
`setPlaybackRate: (rate: number) => void;`	Sets the playback rate or speed for the player. The `rate` parameter is a decimal number between 0.0 and 2.0.
`setVolume: (volume: number) => void;`	Sets the volume of the video. The `volume` parameter indicates the volume level set, typically between 0 (mute) and 1 (maximum volume).
`stop: () => void;`	Stops the currently playing video.

Example

The following example demonstrates how to create a custom player component with the useFlowplayer hook that can access the player's state and dispatch function. Within this component, the onViewReady event handler function listens to player events and loads video for playback using the dispatch.prepare() method.

Copy

Copied

// Add necessary modules and components to App.tsx
import FlowplayerView, {
  FlowplayerProvider,
  useFlowplayer,
  type FlowplayerMedia,
  type FlowplayerRef,
} from '@flowplayer/react-native-sdk';
import React, { useRef } from 'react';
import { StyleSheet, Text } from 'react-native';

// Define a constant to load a Wowza video file and its configuration
const VIDEO: FlowplayerMedia = {
  mediaId: '[media-id]',
  playerId: '[player-configuration-id]',
};

// Define a custom player component
const MyPlayerComponent: React.FC = () => {
  // Use the useFlowplayer hook to access the player's state and dispatch function
  const [state, dispatch] = useFlowplayer();

  // Initialize a ref with the useRef hook to hold a reference to the player instance
  const flowplayerRef = useRef<FlowplayerRef>(null);

  // Define a function to prepare the video for playback using dispatch.prepare()
  const onViewReady = () => {
    // Load the player when the view renders and automatically play
    console.log({state});
    dispatch?.prepare?.(VIDEO);
    dispatch?.setAutoplay?.(true);
  };

  // Render the player and pass props to the component
  return (
    <>
      <FlowplayerView
        ref={flowplayerRef}
        onViewReady={onViewReady}
        style={styles.flowplayer}
      />
      <Text>{state.isPlaying ? 'Playing' : 'Stopped'}</Text>
    </>
  );
};

// Render the player view inside a parent or root component 
const MyPlayerView: React.FC = () => (
  <FlowplayerProvider>
    <MyPlayerComponent />
  </FlowplayerProvider> 
);

function App(): JSX.Element {
  return <MyPlayerView />;
}

// Style the component
const styles = StyleSheet.create({
  flowplayer: {
    width: '100%',
    height: 250,
    backgroundColor: '#000000',
    marginTop: '25%',
  },
});