@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