How to create a responsive video player in React

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 library 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 enough of the words, 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

npm install reactjs-media

yarn

yarn add 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.

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:

It has more props and 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. All you have to do is copy the facebook video URL and paste it as the src prop in the component. The player will automatically load the facebook sdk into the body section of your app and then play the video. To learn more about it visit the documentaion

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 video player although their might be others that are better that it but as I know when it comes to a native video player this is the best I have seen since it also includes an audio player component. You can find it's source code on Github

Comments

[Jack Mkimbo]

Hello Jim, I tried working with the package but the play button is not centered on mobile screens, is there a way to change that