React.js - react-player how to play local video

Question

I am currently trying to play a video on local host in react.js. I am using the react-player module to create a video player component. I am able to play videos using urls such as youtube and facebook links but I am unable to use local videos using the filepath. I read through all of the documentation on github for the module but I was unable to find an answer, which is why I am here asking you this question. Below is my code :

import React, { Component } from 'react'
import ReactPlayer from 'react-player'



class Video extends Component {
    render () {
      return (
        <div className='player-wrapper'>
          <ReactPlayer
            className='react-player fixed-bottom'
            url= 'M_03292018202006_00000000U2940605_1_001-1.MP4'
            width='100%'
            height='100%'
            controls = {true}

          />
        </div>
      )
    }
  }

  export default Video;

Answer 1

you have to create video object URL.

import React, { useState } from "react"; 
import ReactPlayer from "react-player";

 const [videoFilePath, setVideoFilePath] = useState(null);


const handleVideoUpload = (event) => {
setVideoFilePath(URL.createObjectURL(event.target.files[0]));
};

....

<input type="file" onChange={handleVideoUpload} />

...

<ReactPlayer url={videoFilePath} width="100%" height="100%" controls={true} />