@flowplayer/react-flowplayer

The official React component.

Table of contents

Installation

react-flowplayer exists in NPM. Use your favourite 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

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 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 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 {api, Flowplayer} = useFlowplayer({ token: "my_token" })

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

See full blown example below.

Flowplayer React Example

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

import "@flowplayer/player/flowplayer.css"

const DEMO_TOKEN = "<mytoken>"

const SOURCES = ["//edge.flowplayer.org/bauhaus.mp4", "//edge.flowplayer.org/functional.mp4"]

const Main = () => {
    // Get API handle in an asynchronous manner
    const { Flowplayer, api: playerApi } = useFlowplayer({ token: DEMO_TOKEN })

    const [demoPlaybackState, setDemoPlaybackState] = useState("paused")

    const [demoSrc, setDemoSrc] = useState(SOURCES[0])

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

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

    // Listen to player events for the demo
    useEffect(() => {
        if (!playerApi) return // No API yet available
        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])

    return (
        <div className="container">
            <h1>Flowplayer React Demo</h1>
            <div className="row">
                <div className="column">
                    <Flowplayer src={demoSrc} />
                </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)

Advanced demo

An advanced demo with sample app can be found on Github

There is also a page with the sample app

Results