@flowplayer/react-flowplayer

The official React component.

Installation

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

The component has a peer dependency to both react and @flowplayer/player.

Yarn

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

NPM

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

Migration to 1.2.0

This version brought in a decoupled version of @flowplayer/react-player. 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-player"

After

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

useFlowplayer hook changes

Before

  import { useFlowplayer } from "@flowplayer/react-player"
  .
  .
  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-player"
  .
  .
  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-player"
  .
  .
  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 }} />
  )

Basic usage

First you need to import the player

import Flowplayer from "@flowplayer/react-flowplayer"

Then you can include a player in your component

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

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>" />
}

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.

See full blown example below.

Flowplayer React Example

import "@flowplayer/player/flowplayer.css"

import ReactDom from "react-dom"
import React, { useEffect, useRef, useState } from "react"
import Flowplayer, { useFlowplayer } from "@flowplayer/react-player"
import { PAUSE, PLAYING } from "@flowplayer/player/core/events"

const DEMO_TOKEN = "<my-token>";
const SOURCES = [
    "//edge.flowplayer.org/bauhaus.mp4",
    "//edge.flowplayer.org/functional.mp4"
];

const Main = () => {
    // Get API handle in an asynchronous manner
    const playerRef = useRef<HTMLDivElement | null>(null);
    const playerApi = useFlowplayer(playerRef);

    // State
    const [demoPlaybackState, setDemoPlaybackState] = useState("paused");
    const [demoSrc, setDemoSrc] = useState(SOURCES[0]);

    // Listen to player events for the demo
    useEffect(() => {
        if (!playerApi) return
        function stateHandler(ev: Event) {
            if (ev.type === PAUSE)
                setDemoPlaybackState("paused")
            if (ev.type === PLAYING)
                setDemoPlaybackState("playing")
        }

        playerApi.on([PAUSE, PLAYING], stateHandler)

        return () => {
            // Cleanup on unmount
            if (!playerApi) return
            playerApi.off(PAUSE, stateHandler)
            playerApi.off(PLAYING, stateHandler)
        }
    }, [playerApi]);

    // Helpers
    const togglePlay = () => {
        if (!playerApi) return // No API available
        playerApi.togglePlay()
    };

    const toggleSrc = () => {
        const nextIndex = SOURCES.indexOf(demoSrc) + 1
        setDemoSrc(SOURCES[nextIndex] || SOURCES[0])
    };

    return (
        <div className="container">
            <h1>Flowplayer React Demo</h1>
            <div className="row">
                <div className="column">
                    <Flowplayer src={demoSrc} token={DEMO_TOKEN} ref={playerRef} />
                </div>
            </div>
            <div className="row">
                <div className="column">
                    Playback state is: { demoPlaybackState }
                </div>
            </div>
            <div className="row">
                <div className="column">
                    <h2>API handles</h2>
                    <button onClick={togglePlay}>Play / pause</button>
                </div>
                <div className="column">
                    <h2>Configuration changes</h2>
                    <button onClick={toggleSrc}>Toggle source</button>
                </div>
            </div>
        </div>
    );
}

const container = document.querySelector("#main")

ReactDom.render(<Main />, container)

Props

All available props of Flowplayer component.	Prop	Description	Type
token	Token issued by Flowplayer	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