React 18 Build Responsive Video and Audio Player Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

React js video and audio player tutorial. Video players can be seen easily on all the popular websites, be it Facebook, Instagram, or YouTube; in general, these sites have their own video player.

What if you have to create your own video player? If you are new to web development, you may find it a bit tricky to embed a video player in React.

This tutorial will teach you how to create a responsive video player in React js application using the Reactjs Media package and also teach you how to create a responsive audio player and audio player from scratch.

The reactjs-media library allows you to make a simple responsive video player which works best on every device size.

On the other hand, you can create an audio player component, YouTube player component, and Facebook player component in react application with this package.

It is easy to set up, requires only the ReactVideo library to be imported, and comes with a handful of properties that help you quickly manage the video player.

How to Create Video / Audio Player in React Js

• Step 1: Create React Project
• Step 2: Install React Js Media Package
• Step 3: Create Component File
• Step 4: Make Responsive Video Player Component
• Step 5: Create Audio Player
• Step 6: Update App Js File
• Step 7: Run Development Server

Create React Project

In the first step, we have to create the react app, and you may download the latest version of react application using the following command.

Skip this step, if the app has already been created.

npx create-react-app react-blog

App is ready, next just move into the project folder.

cd react-blog

Install React Js Media Package

You need to install the react js media package using the provided command.

npm install reactjs-media --legacy-peer-deps

Create Component File

Various functionalists can be arranged in components in React, consequently we have to create a components/ folder inside the react project.

Inside the app folder, also, create a new MediaComponent.js file, insert the following code.

import React, { Component } from "react";

class MediaComponent extends Component {
  render() {
    return (
      <div> </div>
    );
  }
}

export default MediaComponent;

Make Video Player Component

In this step, you have to open the components/MediaComponent.js file and insert the given below code to create the Responsive video player in react.

import React, { Component } from "react";
import { ReactVideo } from "reactjs-media";


class MediaComponent extends Component {
  
  render() {
    return (
      <div>
        <ReactVideo
            src='https://www.example.com/myvideo.mp4'
            poster='/poster.png'
            primaryColor="red"
            autoPlay
        />
      </div>
    );
  }

}

export default MediaComponent;

Create Audio Player

You can import the ReactAudio module from “reactjs-media” package, use the ReactAudio directive pass the audio file and poster in react audio component.

import React, { Component } from "react";
import { ReactAudio } from "reactjs-media";


class MediaComponent extends Component {
  
  render() {
    return (
      <div>
         <ReactAudio
              src="/your_audio_file.mp4"
              poster="/your_poster_file.png"
          />
      </div>
    );
  }

}

export default MediaComponent;

Update App Js File

Next, in this step you require to register the media player component into the primary App.js file.

import React from 'react';
import './App.css';

import MediaComponent from './components/MediaComponent';

function App() {
  return (
    <div className="App">
      <MediaComponent />
    </div>
  );
}

export default App;

Run Development Server

One more time, head over to the command prompt, type the provided command on the terminal, hit enter, and run the development server.

npm start

Finally, you can see the react app on the browser:

http://localhost:3000

Conclusion

In this tutorial, we have learned how to create a video player component in react js application and also explored how to use the react js media plugin to develop the custom video player.

If you want to explore more on how to customize it, make sure to checkout the official documentation here.