The perfect player with react-native-video + react-native-vlc-media-player
If you are trying to make your own multimedia player in react-native, you have come to the right article, since I will explain how to combine the two most used libraries for this purpose, thus achieving the most stable react-native player.
Let us begin!
The react-native-video library is the most widely used to develop react-native players and this is thanks to the functions it offers and the ease with which it can be implemented. One of the most special abilities that it has, since it is lacking in other libraries, is that of obtaining the audio, video and subtitle tracks that some video formats such as mkv have. It also allows you to select them so we can change the audio in the player as long as the video allows it.
But react-native-video also has its flaws, such as the fact that it doesn’t accept various types of tracks for both audio and video and that’s where react-native-vlc-media-player comes in.
The react-native-vlc-media-player library uses the VLC Player engine, which allows it to play a greater number of types of audio and video. But what is his defect? which does not have support for multitrack audio, video and subtitles. So we will combine the two libraries to create the most complete player developed with react-native.
The first thing we will do is install the two libraries and import them into our component where we will generate the player and add the <Video> component of react-native-video with the hooks to control the audio, video and subtitle tracks, which we will configure by default the video hook with the value ‘auto’ and the audio hook with the value ‘system’. It also contains the hook and the function to save the video metadata where it contains the information of the video, audio and subtitle tracks.
You can see that we set up a function to handle errors called playerError. This function will be very important because it will indicate when we will go from the react-native-video component to the react-native-vlc-media-player component. We add the hook where we will control this step
And this would be the playerError function where we will pass to the react-native-vlc-media-player component when we receive a NO_UNSUPPORTED_TYPE error from the react-native-video component
Now we will add the react-native-vlc-media-player component, leaving the code as follows
We already have it!
With this code you can start developing the most complete react-native player.
You already know that if you liked the article you can invite me to a coffee ;-)
Remember to follow the next post for more articles on React Native with Expo
