As web developers, we often need to embed a video player with our application, but sometimes, it really becomes hectic to create a video player which completely goes with our UI. Most famous websites like Youtube, Facebook, etc., use their own custom video players. In this article, we will learn how to create custom video and audio players using React.

Here, in this tutorial, we will be creating the players using a package because the default video player, which is provided by HTML5, looks different for different browsers. As the UI for the default HTML5 video player is different for different browsers, we will not be using it. Also, we are not going to build anything from scratch. So we need to install a package called ReactJS Media library. The reason for using this package is the documentation it provides, and also, the HTML5 player of this package provides a  great UI.

Post Graduate Program: Full Stack Web Development

in Collaboration with Caltech CTMEEnroll Now
Post Graduate Program: Full Stack Web Development

Now let us first go through the installation process:

Installing ReactJS

For the installation, any of the package managers can be used, such as npm or yarn.

First, you need to go to your terminal and then paste any of the commands given below (according to your package manager):

  • For npm users : npm install reactjs-media
  • For yarn users : yarn add reactjs-media

Now after installation, we can use it within our application. However, first, we need to import some of the components from this package. 

Components

Let us see the list of components that are needed to be imported from reactjs-media:

  1. ReactVideo: For using a native video player.
  2. ReactAudio: For using the native audio player.
  3. FacebookPlayer: For using the videos from facebook or for using a facebook player.
  4. Image: For using those images which are responsive and optimized.
  5. YoutubePlayer: For using videos from Youtube or for using Youtube players.

Usage Procedure

Now let’s see how to use some of these imported components of reactjs-media:

1. Video Player

Let us first use the Video Player component. This component has been imported from the react-js media library, and the props are needed to be passed in this component. This is considered as a very native video player though it is very enhanced or improved, and a great User Interface is provided by this library.

Let us go through the code for using the Video Player component:

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/posterImage.png"

                primaryColor="red"

                // other props can be passed by you

            />

        </div>

    );

};

export default App;

Though there are many more props to use with the library for which we need to check out their official documentation.

The output of the above code will show something like this:

ReactJS_Video_Player_1  

Free ReactJS for Beginners Course

Master the Basics of ReactJSStart Learning
Free ReactJS for Beginners Course

2. Audio Player

This component is mainly used for using audio players. The code implementation for the same is as follows:

import React from "react";

import { ReactAudio } from "reactjs-media";

const MyVideo = () => {

    return (

      <div className="container">

        <h1>Hello, audio player!</h1>

        <AudioPlayer

                 src="/audio.mp4"

                //poster="/poster.png"

                //other props can be passed by you 

       />

  </div>

    );

};    

The output of the above code will look like the following :

ReactJS_Video_Player_2 

3. Youtube Player

This component is for using Youtube videos. The procedure for using this component is the easiest where we can pass the height and width of the video screen.

Now let us go through the code implementation for using this component:

const App = () => {

    return (

        <div>

            <YoutubePlayer

                src="https://youtu.be/UZCO5k1Nu70" // Required

                width={650}

                height={600}

            />

        </div>

    );

};

We can check out it’s documentation for using more props.

Your output should be something like the following :

ReactJS_Video_Player_3.

New Course: Full Stack Development for Beginners

Learn Git Command, Angular, NodeJS, Maven & MoreEnroll Now
New Course: Full Stack Development for Beginners

4. Facebook Player 

The Facebook player component is used for playing the videos from Facebook within our application body. 

The URL for the Facebook video is needed to be passed as the src props of the component. After passing the URL, the Facebook or Meta SDK (Software Development Kit) will be automatically loaded into our application body, and the video will be played.

Now let us go through the code implementation for this:

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}

            />

        </>

    );

}; 

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion

We hope you got a fair idea on the subject “video players using ReactJS”. As discussed in this article, library reactjs-media is really very helpful for creating native video players. Though there might be many other libraries, using this one is very easy. Click on the following link for official GitHub repository for reactjs-media.

These days along with the knowledge of data structure and algorithms, our development skill is also tested. Therefore, it is important that you work towards polishing your development skills and continue to upgrade yourself with the latest trends of the tech industry. One of the ways by which you can keep yourself updated is by pursuing courses designed specially for tech professionals. Simplilearn offers Full Stack Web Development Certification Course that comprises a variety of software development courses, ranging from the fundamentals to advanced topics. The program will help you to master both the frontend and backend with the different types of technologies and tools.

You can also check out Simplilearn’s free online skill-up courses where you will find several courses that will help you become expert in different domains of your choice such as Machine Learning, Artificial Intelligence, business analytics, etc.

About the Author

SimplilearnSimplilearn

Simplilearn is one of the world’s leading providers of online training for Digital Marketing, Cloud Computing, Project Management, Data Science, IT, Software Development, and many other emerging technologies.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.