Adding a video player

Having videos in your website is a common need. In this recipe we will show you how to use react-player, a package that helps adding video content to your website, along with some common use cases.

Walk-through

1. Install react-player

npm i react-player

2. Use ReactPlayer in your project

You just need to import ReactPlayer and start using it.

// ...
import ReactPlayer from 'react-player';
const Home = () => (
<div className={ styles.home }>
<ReactPlayer url="https://www.video-url.com" />
</div>
);

3. Common use cases

Now let's go through some common use cases that might be helpful.

⚠️ By default react-player sets a width of 640px and a height of 360px to the video player. You should change it using width and height props in order to make it responsive according to your needs.

1. Autoplay

To enable autoplay you need to use the playing prop, that lets you control the playing of the video. It can be particularly useful when you have a loading state and you only want the video to play after the loading is over.

const [isPlaying, setIsPlaying] = useState(true);
// ...
<ReactPlayer url="https://www.video-url.com" playing={ isPlaying } />

ℹ️ Be sure to check the different browser policies for autoplaying videos as they are different and you might need additional configuration. For example, on Chrome you might need to mute the video in order to autoplay it, or in Safari you might need additional work to make it autoplay on low power mode devices which is a common problem.

2. Enable/disable default controls

To enable or disable the video controls you need to use the controls prop.

<ReactPlayer url="https://www.video-url.com" controls />

3. Disable download

The download of videos is enabled by default. To disable it you need to change the controlsList property using the config prop.

<ReactPlayer
url="https://www.video-url.com"
config={ {
file: {
attributes: {
controlsList: "nodownload"
}
}
} } />

4. Disable context menu

The context menu is enabled by default. To disable it you need to change the onContextMenu event and prevent the default behavior.

const handleContextMenu = useCallback((event) => {
event.preventDefault();
}, []);
// ...
<ReactPlayer url="https://www.video-url.com" onContextMenu={ handleContextMenu } />

5. Change the play icon

When using the player in light mode you can change the playIcon to whatever you need.

<ReactPlayer
url="https://www.video-url.com"
light
playIcon={ <div>Icon</div> } />

You can also pass an image URL to the light prop so it shows the image instead of the video thumbnail.

There is a lot more that you can do with react-player, so please take a look at their documentation to find more information.