How to play local video in reactjs

Share the post

Hello All, In this ReactJS tutorial, We will discuss How to play local video in reactjs. What are the steps required to play a video saved in the local project folder?

In this example, We will play a local folder video using a simple video tag in HTML. We will not install any third-party dependency for it. We will save our video in the videos folder which comes under the public folder.

So, Let’s Start…

Steps required to play local video in reactjs

  • Step1: Create a new React project
  • Step2: Use HTML Video Tag
  • Step3: Create folder Videos & Paste your video
  • Step4: Run the React Application
  • Step5: Output

Step 1: Create a new React Project

We need to create a new ReactJS Project. Use the below command to create a new project in ReactJS.

npx create-react-app myapp

Now, go to navigate to the project path as shown below

cd myapp

We will open this project in the Visual Studio Code editor using the following command.

code .

Step2 : Use HTML Video Tag

Now, We will going to use <video> tag to play local video in react application. Please see below code.

Full App.js

import React from 'react';

import './App.css';

const App = () => {

  return (
    <>
      <div>
        <video src='videos/sampleVideo.mp4'
          width='100%'
          height='100%'
          controls={true} />
      </div>
    </>
  );
}

export default App;

Step3: Create folder Videos & Paste your video

Create a new subfolder videos under public folder. now, paste your video which you want to play in react application.

Please see the below screenshot for reference

place video under videos folder
place video under videos folder

Step4: Run the React Application

Now, You can run the ReactJS application using the below command

npm run start

Step5: Output

Now, We can check the output in the browser. Please see the below output.

How to play local video in reactjs
How to play local video in reactjs

If you want to see How to run youtube videos in react js using react-player then read this article here.

Leave a Comment