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.
ReactPlayer in your project
You just need to import
ReactPlayer and start using it.
3. Common use cases
Now let's go through some common use cases that might be helpful.
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.
ℹ️ 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
3. Disable download
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.
5. Change the play icon
When using the player in
light mode you can change the
playIcon to whatever you need.
You can also pass an image URL to the
light prop so it shows the image instead of the video thumbnail.