@flowplayer/react-flowplayer

The official React component wrapping Flowplayer Native.

Installation

react-flowplayer exists in NPM. Use your favorite package manager to install it.

The component has a peer dependency to both react and the main Flowplayer Native NPM package @flowplayer/player if you wish to use player plugins.

Yarn

yarn add react @flowplayer/player @flowplayer/react-flowplayer

NPM

npm install react @flowplayer/player @flowplayer/react-flowplayer

Importing the player

import Flowplayer, { useFlowplayer } from "@flowplayer/react-flowplayer"

Basic usage

First you need to import the player as explained above.

Then you can include a player with video source in your component.

<Flowplayer token="<my-token>" src="//edge.flowplayer.org/bauhaus.mp4" />

Configuration

All configuration options are aggregated in the the opts prop.

  import { useRef } from "react"
  import Flowplayer, { useFlowplayer } from "@flowplayer/react-flowplayer"
  .
  .
  const playerRef = useRef(null)
  const playerApi = useFlowplayer(playerRef)
  .
  // Do something with API
  .
  return (
    <Flowplayer src="<URL>" ref={playerRef} token="<wowza-flowplayer-token>" opts={{ ui: 10, asel: true }} />
  )

Using plugins

The react component is using the default export of @flowplayer/player. This means that the player does not come with any pre-registered plugins.

If you need some functionality outside of the default player you need to register them by hand.

Example - loading a video from Flowplayer Platform using the OVP plugin:

import Flowplayer from "@flowplayer/react-flowplayer"
import OVPPlugin from "@flowplayer/player/plugins/ovp"
import HLSPlugin from "@flowplayer/player/plugins/hls"
import flowplayer from "@flowplayer/player"

// Register plugins
flowplayer(HLSPlugin, OVPPlugin)

const MyApp = () => {
    return <Flowplayer token="<my-token>" src="<GUID from Flowplayer OVP platform>" />
}

useFlowplayer hook usage

  import { useRef } from "react"
  import Flowplayer, { useFlowplayer } from "@flowplayer/react-flowplayer"
  .
  .
  const playerRef = useRef(null)
  const playerApi = useFlowplayer(playerRef)
  .
  // Do something with API
  .
  return (
    <Flowplayer src="<URL>" ref={playerRef} token="<my-token>" />
  )

Accessing the player API

The player react component will react to changed properties. This means that you don't necessarily need to access the api for things like changing the video source - the player react component will handle this under the hood.

If you need to access the player API the component comes with a hook called useFlowplayer():

import { useFlowplayer } from "@flowplayer/react-flowplayer"

In order to use the hook you need to pass your player token to the hook in order to get a pre-populated Flowplayer component returned.

Then you can use the hook with the ref to obtain an API handle:

const playerRef = useRef()
const playerApi = useFlowplayer(playerRef)
.
.
.

useEffect(() => {
  if (!playerApi) return;

  playerApi.play();

}, [playerApi])

.
.
.
return (
  <Flowplayer token="<my-token>" ref={playerRef}>
)

If the API is not yet available then playerApi will be null so you need to safe-guard against that.

Props

All available props of the Flowplayer component:

Prop	Description	Type
token	Token created on https://app.flowplayer.com/tokens	string
src	URL of the media asset	string
opts	Player configuration	Config
ref	The ref of the Flowplayer component	React.Ref

Typescript types

You can get the props types by importing them from @flowplayer/react-flowplayer

import type { FlowplayerProps } from "@flowplayer/react-flowplayer"

Advanced demo

An advanced demo with sample app can be found on Github

There is also a page with the sample app

Migration to 1.2.0

This version brought in a decoupled version of @flowplayer/react-flowplayer. With this minor change performance and separation of concerns was achieved.

Import changes

Before

// The hook was needed to import the `Flowplayer` component
import { useFlowplayer } from "@flowplayer/react-flowplayer"

After

// The `Flowplayer` component now can be imported separately
import Flowplayer, { useFlowplayer } from "@flowplayer/react-flowplayer"

useFlowplayer hook changes

Before

  import { useFlowplayer } from "@flowplayer/react-flowplayer"
  .
  .
  const { Flowplayer, api: playerApi } = useFlowplayer({ token: "<my-token>" })
  .
  // Do something with API
  .
  return (
    <Flowplayer src="<URL>" />
  )

After

  import { useRef } from "react"
  import Flowplayer, { useFlowplayer } from "@flowplayer/react-flowplayer"
  .
  .
  const playerRef = useRef(null)
  const playerApi = useFlowplayer(playerRef)
  .
  // Do something with API
  .
  return (
    <Flowplayer src="<URL>" ref={playerRef} token="<my-token>" />
  )

Flowplayer component prop changes

We made sure to aggregate all configuration into the opts prop.

Before

  import { useFlowplayer } from "@flowplayer/react-flowplayer"
  .
  .
  const { Flowplayer, api: playerApi } = useFlowplayer({ token: "<my-token>" })
  .
  // Do something with API
  .
  return (
    <Flowplayer src="<URL>" ui={8} opts={{ asel: true }} />
  )

After

  import { useRef } from "react"
  import Flowplayer, { useFlowplayer } from "@flowplayer/react-player"
  .
  .
  const playerRef = useRef(null)
  const playerApi = useFlowplayer(playerRef)
  .
  // Do something with API
  .
  return (
    <Flowplayer src="<URL>" ref={playerRef} token="<my-token>" opts={{ ui: 10, asel: true }} />
  )