A dead-simple video player for React
Because it usually is nearly impossible to style the available players in a way you need, I decided to create my own that has everything you need or may need exactly how you need it.
In the lower right corner you can see some custom controls added to the video.
All the properties and methods for controlling the video are available to all the children of the player by cloning. Thanks to this, you don't need to pass props that are irrelevant to the player into it (e.g. reaction counts).
Thanks to detaching the controls via the interface, you can modify the provided controls and their order however you like. They get lined up with proper padding and margins in the control strip of the video, but you can also use absolute positioning and create whatever other overlays you wish. All components passed as children to the Controls
component have access to control props (such as play, pause, etc.)
The controls available are:
- ⏯️ play/pause toggle PlayToggle
- 🔉 volume control Volume (mute/unmute on click, slider appears on hover, then you can control the volume with mouse wheel or by clicking the slider)
- 🖥 fullscreen toggle FullScreenToggle
- 🕐 time display (clicking on it you can switch between elapsed/remaining) Time
- 🕐 elapsed time (when keeping things simple) ElapsedTime
- ☄️ progress bar (with seeking function) ProgressBar
To install, install biograf
npm package and make sure you have it's peer dependencies:
yarn add biograf react react-dom framer-motion styled-components
Implementing video has never been simpler:
<Player src={[videoURL]}/>
and voilà!
However, this would be really simple player. To make it more interesting, you can use standard HTML5 video props like e.g.:
<Player src={[videoURL]} preload="meta" autoplay muted/>
To add some controls you can add them as children to the Controls
component (note that you can choose whatever order you'd like:
import { Player, PlayToggle, Volume, Time, Controls } from 'biograf';
<Player src={[videoURL]} preload="meta" muted>
<Controls>
<Time/>
<PlayToggle/>
<Volume/>
</Controls>
</Player>
As styled-components
are used, you can change the basic colors by using a theme that defines key biograf
where you can add these keys to alter the corresponding colors:
- PrimaryColor Color of text.
- ControlsBackground Background color of the control buttons.
- ControlsBackgroundOnHover Background color of the control buttons on hover.
If that is not enough (it might not be), feel free to create your own controls just the way you like 'em.
To implement your own controls, simply create a component that accepts controlProps: ControlProps
as its prop. This will get passed to the component via the Controls
component, you just create the component and pass it as a child to the Controls
. The interface is defined as following:
interface ControlProps {
duration: number; // in seconds
elapsed: number; // in seconds
fullscreen: boolean;
isPlaying: boolean;
muted: boolean;
progress: number; // 0-1
volume: number; // 0-1
mute(mute: boolean): void;
seek(progress: number): void;
setVolume(volume: number): void;
toggleFullscreen(): void;
togglePlay(): void;
}
For example you can use seek, duration and progress props to create "+15s skip" Netflix like button.
If you wish e.g. to add more tracks or use something else that is provided by the <video/>
component but is not supported in this package (yet), you can do so by utilizing handle
prop:
const playerHandle = useRef();
<Player handle={playerHandle}/>
Then, you can add subtitles, different audio tracks, etc.
- Seeking via dragging
- Volume via dragging
- Hiding of the controls
- Maybe add a gradient under the control strip?