Most famous websites usually have there own custom video players such as Youtube, Facebook etc. So some times you as a web developer you want to embed a video in your website but find it hard to create one with an amazing UI. Today I will show you how to have an amazing Video and Audio player in React.
Since the default HTML5 video player usually looks different in different browsers you definetely want to avoid using it and you definetely dont want to create one from scratch so the best idea is to use a package.
We shall be using ReactJS Media for this tutorial. The reason is because it has a great documentation and its HTML5 player has a great UI compared to other famous libraries like react player. So lets start
You can install it with any of your favourite package manager here we shall demostrate
yarn so go to your terminal and type the following command.
Now that you have installed it your can now use it.
To use it you will have to import the the component you want from
reactjs-media. The list of components are:
ReactVideofor a native video player.
ReactAudiofor an audio player.
FacebookPlayerfor a Facebook player(For videos from facebook ).
Imagefor responsive and optimized images.
YoutubePlayerfor a youtube player.
Incase the more players are added i will update this page. This is because more players are added every time.
Now let me demonstrate how to use each of those components.
This is the native video player but it is enhanced and given a great UI. You have to import it from the library and pass in props. It can be used for normal video files supported by the browsers.
This will create a player that is similar to one like this
It has more
propsand they can be found in the Official documentation
The audio player is used for audio files and it can be used like this.
Your can also import the audio player from another file in the package.
Using the it is easy all you have to do is add the video url.
it also hase other props so check them out in the documentation.
This is used to play videos from facebook.
To me i think this is the best package out there that you can use if you want to create a vidoe player although their might be others that are better that it but as i know when it comes to a native videoplayer this is the best i have seen since it also includes an audio component