@flowplayer/react-flowplayer

The official React component wrapping Wowza Flowplayer.

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="<wowza-flowplayer-token>" src="//cdn.wowza.com/somevideo.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 functionality outside of the default player, you need to register it by hand, and, import @flowplayer/player as well.

Example - Loading an HLS video from the Wowza CDN utilizing the HLS plugin:

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

// Register plugins
flowplayer(HLSPlugin)

//configure 
const MyApp = () => {
    return <Flowplayer token="<wowza-flowplayer-token>" src="https://cdn.flowplayer.com/somepath/somevideo.m3u8" />
}

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"

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:

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.