select the local file & play selected video in reactjs

Share the post

Hello All, In this ReactJS tutorial, We will see How to select the local file & play the selected video in reactjs. How to upload a video and preview it using reactjs. In the previous ReactJS tutorial, We had discussed How to play a project folder video in ReactJS.

In this tutorial, We will select a video file using an HTML input tag & then display the same selected video in the video tag of HTML. Now, Please go through the full process as explained below.

So, Let’s Start…

Steps required to select the local file & play selected video in reactjs

  • Step1: Create a new React Project
  • Step2: Write the code
  • Step3: Run the React Application
  • Step4: Output

Step1: 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: Write the Code

Now, We have to take one input to select a video file & one video tag to display that selected video. Please see the below App.js for reference.

Full App.js

import React, { useState } from "react";

const App = () => {
  const [videoPath, setVideoPath] = useState(null);
  const handleVideoUpload = (event) => {
    setVideoPath(URL.createObjectURL(event.target.files[0]));
  };
  return (
    <>
      <div>
        <div>
          <input type="file" onChange={handleVideoUpload} />
        </div>
        <div>
          <p>Display selected video</p>
          <video src={videoPath} width="100%" height="100%" controls={true} />
        </div>
      </div>
    </>
  );
}

export default App;

Step3: Run the React Application

Now, Run the React Application using the following command.

npm run start

Step4: Output

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

select the local file & play selected video in reactjs
select the local file & play selected video in reactjs

Leave a Comment