This project aims to enable you to build a customize the visuals of a native HTML video player in react.
If you would like to request features open an issue, or even better open a PR. If you have questions or need help please ask in Github Discussions!
In the project directory run:
yarn add custom-react-player
or
npm install custom-react-player(TS support is natively included)
Once installed you can use it in your code:
import Player from 'custom-react-player';
...
return (
<Player
src={videoURL}
...props
/>
)The props used to customize the player are:
bottomControls- Changes the controls at the bottom of the player
midControls- Changes controls in the center e.g. large play/pause button
topControls- Any extra controls you want on the top e.g. video name etc.
You can also customize the finer details:
volumeIcon:JSX.ElementaccentColor:colorwidth:numberheight:numbersrc:stringvideoType: 'mp4' | 'ogg' | 'webm'
Usage as follow:
<Player
bottomControls={(
progress,
duration,
seekTo,
changeVolume,
toggleFullscreen,
toggleMute,
togglePlay,
) => {
// Render your components here
}}
/>Usage:
<Player
midControls={(playing, togglePlayState) => {
// Render your components here
}}
/>Usage:
<Player
topControls={() => {
// Render your components here
}}
/>To make sure fullscreen works correctly you must set your <body> to have margin/padding of 0:
body {
padding: 0;
margin: 0;
}