How to create a responsive video player in React

Beingana Jim Junior

Beingana Jim Junior

Front end Devoloper

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

Installation#

You can install it with any of your favourite package manager here we shall demostrate npm and yarn so go to your terminal and type the following command.

npm install reactjs-media

Now that you have installed it your can now use it.

Components#

To use it you will have to import the the component you want from reactjs-media. The list of components are:

  • ReactVideo for a native video player.
  • ReactAudio for an audio player.
  • FacebookPlayer for a Facebook player(For videos from facebook ).
  • Image for responsive and optimized images.
  • YoutubePlayer for a youtube player.
tip

Incase the more players are added i will update this page. This is because more players are added every time.

Usage#

Now let me demonstrate how to use each of those components.

Video Player#

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.

Example#

import React from "react";
import { ReactVideo } from "reactjs-media";
const App = () => {
return (
<div>
<ReactVideo
src="https://www.example.com/url_to_video.mp4"
poster="https://www.example.com/poster.png"
primaryColor="red"
// other props
/>
</div>
);
};
export default App;

This will create a player that is similar to one like this

00:00
--:--
Download
Picture In Picture
1
Error: Failed to load Video
video poster

It has more propsand they can be found in the Official documentation

Audio Player#

The audio player is used for audio files and it can be used like this.

import React from "react";
import { ReactAudio } from "reactjs-media";
const MyVideo = () => {
return (
<>
<ReactAudio
src="/audio.mp4"
poster="/poster.png"
//you can pass in other props
/>
</>
);
};

Your can also import the audio player from another file in the package.

import { ReactAudio } from "reactjs-media/audio";

Youtube Player#

Using the it is easy all you have to do is add the video url.

Example

const App = () => {
return (
<div>
<YoutubePlayer
src="https://youtu.be/UZCO5k1Nu70" // Reqiured
width={650}
height={600}
/>
</div>
);
};

it also hase other props so check them out in the documentation.

Facebook Player#

This is used to play videos from facebook.

Example#

import React from "react";
import { FacebookPlayer } from "reactjs-media";
const MyVideo = () => {
return (
<>
<FacebookPlayer
src="https://www.facebook.com/facebook/videos/10153231379946729/"
width={650}
height={600}
/>
</>
);
};

Conclusion#

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