Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

2500+

Clients projects

1458

Happy customers

React JS

Create React Video Player (Part 1): Beginners’ Guide

Last Updated on June 4, 2024

Introduction

Are you wondering how to implement react video player in your application? Do you have a client requirement or want to learn just for yourself? In either case, we are here to help you.

Our team is back with a tutorial for beginners: How to create react video player (part 1). You know the drill, follow the step-by-step instructions till the end and implement with us or clone the source code from the last section. Choose whatever’s best for you and start coding, my friend!

Let’s discuss the goals and prerequisites of the tutorial.

Tutorial Goal & Prerequisites: React Video Player

Tutorial Goals

Basic project set up and installation
Simple demo application with react video player
Source code

The video player application is capable of playing videos on this platform:

Youtube
Facebook
Vimeo
Dailymotion
Soundcloud
Wistia
Twitcoh
Mixcloud

Prerequisites

Basic knowledge of ReactJS
Familiarity with installation dependencies
Familiarity with styling the component and its responsiveness

Save up to 40% on Development, Maintenance, and Support Cost
Contact Us and hire Reactjs developers to Upscale Your Product Development Capabilities

Creating a New ReactJS Project

Use the below command to create a new reactJS project.

yarn create react-app react-video-player

Run Application

Use the below command to run the application, just to check whether we have create the project successfully or not.

cd react-video-player
yarn start

Once we execute the above command our application will run successfully. Here’s the default screen you will see.

Code Cleaning

To implement our main functionality using react video player we will open App.js file and remove unnecessary code.

// App.js

function App() {
  return (
    <div className="App">

    </div>
    
    );
}
export default App;

Install react-player

Now for creating a react video player we will at first install react-player package. Use the below command for the same.

yarn add react-player

Let’s Code

Import react-player package in App.js.

import ReactPlayer from 'react-player'

After importing react-player we will make changes in JSX code and for that purpose we will write these lines of code. Your App.js file will look something like this once you are done with adding your code.

// App.js

import ReactPlayer from 'react-player'

function App() {
  return (
    <div className="App">
     <ReactPlayer url='https://www.youtube.com/watch?v=BQwj6A99oVc' />
    </div>
    );
}
export default App;

Now our demo application will look as shown below.

React Video Player Demo App: Set Responsiveness

Once done with the basic implementation of react video player, we will now code for the application’s responsiveness. For making application responsive we will remove JSX code and then add new lines of code.

 <div className="player-wrapper">
      <ReactPlayer
        className='react-player'
        url='https://www.youtube.com/watch?v=BQwj6A99oVc'
        width='100%'
        height='100%'
      />
 </div>

And also import the App.css file. So now our App.js will look like this.

import ReactPlayer from 'react-player';
import './App.css';
function App() {
  return (
    <div className="player-wrapper">
      <ReactPlayer
        className='react-player'
        url='https://www.youtube.com/watch?v=BQwj6A99oVc'
        width='100%'
        height='100%'
      />
    </div>
  );
}
export default App;

Open App.css file and clean up previous code. Add these css styles to make application responsive.

.player-wrapper {
  position: relative;
  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

Voila! done with the responsiveness of our react video player demo app! You can see outcome as shown below.

Github Repository: react-video-player-demo

This way we have successfully implemented video player application in React.js. Feel free to clone the github repository: react-video-player-demo and start exploring more.

Quick Read:

React Static Site Generators

Conclusion

Since, this was a beginners’ guide we are done with the tutorial here. We will be back with Create React Video Player (Part 2): Intermediate Guide with mode features of previous, next, pause, resume, and many more functionalities. Till then you guys try the beginners’ guide and visit ReactJS tutorials page for more such interesting and technical tutorials. We are sure you won’t regret it at all! Use your time and start coding! Don’t forget to write us your feedback and questions. We are building a community to serve tech enthusiasts and to share knowledge with the help of different tutorials, your suggestions will help us be better and do better.