React native video: 10 best libraries to play video in Android and IOS

React native video player can deliver you almost anything you need for a valid video player. What’s more, we can easily control them. However, keep in mind that they can’t provide inbuilt controls to Play/ Pause or Seek videos. The main reason for this is that it provides the pros for full access. In this blog, we will show you how to play, use video in React native.

How to play a video in React Native

To do this, we are going to use Video and MediaControls components. You can access these from react-native-video and react-native-media-controls libraries. Let’s dive deeper into these two components

Video components
React native video
MediaControls Component
React native video

Making a React Native App

Let’s consider this example. In this example, we will use MediaControls to make React native video player

But first, we need to use react – native init to make React Native App. Now, suppose you installed node, then you can use npm to install the react – native – cli command line utility. 

Firstly, open the terminal, go to the workspace and run the following command

React native video

Then, run this code to create a new React Native project

React native video

In case you want to create a new Project with a particular version. Then, you can use the — version argument. It’ll look like this

React native video

After this, a project structure with an index file named App.js will be created in your project directory

Dependencies Installation

You need to install React native video player and react – native – media – controls dependencies to use Videos and MediaControls. As that said, here’s how to install those

Firstly, open the terminal and find your project. You can use this command to do this

React native video

Then, use this command to install react – native – video

React native video

or if you want to install react – native – media – controls

React native video

After this, all the dependency will be copied into your node_module directory

CocoaPods Installation – React native video player

If you want to run video on iOS, you will need to install CocoaPods. However, after the update of React Native 0.60, you don’t need to link the library thanks to auto linking. To install pods, use the following commands

React native video player  

Open App.js in any code editor. Then, replace the code with the following one

code
code
code
code
app

Running the React Native App

To run the React Native App, follow these steps below

Open the terminal and find your project. Use this command

cd ProjectName

If you want to run your project on Android Virtual Device, 

react-native run-android

In case you want to run on iOS Simulator, here’s the code for you

react-native run-ios

>>> Read more about : React native vector icons, React native image,…

Top 10 best React native video player

React – native – video

The first library we want to mention is React – native – video. This is one of the most popular one in the market. It lets you create and play videos on both Android and iOS. Moreover, this library also works with cached videos as well. However, keep in mind that this library only support highest quality export and MP4 export

expo – av

expo – av is highly flexible to use. It’s an open – source platform that allows you to make native apps on Android, iOS, even on the website. Moreover, expo – av contains a universal and libraries. Also, working with expo – av, you’ll get a lot of Expo development tools. As a result, you can develop  

React – native – jw – media – player

Working with React native video player is quite easy since its installation process is mostly automatic. Moreover, it allows you to play videos on both iOS and Android. What’s more, you can customize this library. For instance, you can set the custom style on the player, change the icon color and so on

React – native – vlc – media – player

If you’re looking for a flexible React native video player, then you can’t miss React – native – vlc – media – player. It supports all network streams, RTSP, RTP, RTMP, and so on. Moreover, it allows you to play all files, in all formats. Even the exotic ones, like classic VLC media players, will be played with this library as well. Just like the above libraries, React – native – vlc – media – player can work on both Android and iOS

React – native – video – player

This is a React native video player with some controls. Also, it uses react – native – video for the video playback

React – native – video – processing: React native video player

Just like other React Native video libraries, this one can work on both Android and iOS. However, with Android, it allows you to compress the video. Also, as the name suggests, React – native – video – processing can deliver you a lot of processing options, as well as standalone API

React – native – true – sight

React- native – true – sight is a cross – platform video player. Thus, this can work on both Android and iOS. Moreover, this library provides a fully customizable video player. As a result, you can easily customize the video player as you need. This library also provides common use case documentation of things that you like to implement

React – native – media – player – React native video player

React – native – media – player is quite easy to work with. This is a react native media player with external display controller. Therefore, it can support almost any media forms, from photo, video, music to background mode. However, its current version only supports image media file type *.png, *.jpg and video file type *.mp4

React – native – video – editor

This is the module of react native to merge videos. Thus, with this, you can merge multiple videos on both Android and iOS

React – native – media – kit

Last but not least, we want to mention React – native – media – kit. This includes video and audio components for apps in React. Furthermore, this React native video player supports both Android and iOS with the similar API to HTML video. What’s more, it can provide you with a default set of controls. With them, you will be able to play/ pause, seek, display current playback and buffer progress. Thanks to that, you can easily work with this library. 

In conclusion

We hope to deliver you sufficient understanding about React native video player. However, working effectively with React is not easy. Therefore, if you still have some unanswered questions or uncertainty about React, don’t hesitate to contact our React native development services

Tags

Share