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;

Solution 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} />

Solution 2

With a Create React App (short CRA) you could place your video files in the public folder e.g. in a subfolder videos. Then you can access that static file as you did it in your code.

CRA will just copy the files to the final static page as mentioned in the docs.

If you don't use a CRA setup you need to copy your video to the final bundle e.g. by using Webpack.

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= 'videos/demo_video.MP4'
            width='100%'
            height='100%'
            controls = {true}

            />
        </div>
        )
    }
}

export default Video;

Solution 3

You would need to import the local video file to you component.

import myVideo from '../media/M_03292018202006_00000000U2940605_1_001-1.MP4'

class Video extends Component {
  render () {
    return (
      <div className='player-wrapper'>
        <ReactPlayer
          url={myVideo}
          // ...
        />
      </div>
    )
  }
}

```

Solution 4

Main Catch: All the statics should placed inside the public folder. Any video, audio, images, etc.

Why?
Public folder will not be processed by Web-pack and hence remains untouched and you could see it as it is. Placing it anywhere else would be processed and tweaked and optimised by webpacks, thus may change the compression, or extensions of video file that result in unproper parsing of code (though it is not seen with images, videos get affected by it).

How to access public folder from code?
Every file url is pointed to public folder. Every file url with ./ is pointed to file directory.
To access public/video1.mp4 just write url='video1.mp4'.

eg.

            <ReactPlayer playing url='video1.mp4'
                height='500px'
                width='800px'
                controls='true'
            />

View more solutions

Comments

[Alan Abraham]

Thank you for your solution! I tried importing it like you said just now but it when run using npm start it is just giving me a black background. Would you know why this is ?

[NinaW]

My import link was just an example, so you need to import your file from it's location in your folder.

[NinaW]

If it doesn't work, there may be a problem with the mp4 format. github.com/facebook/create-react-app/issues/6822 (assuming you are using Create React App)

[Oleksandr Fomin]

Worked perfectly. Thank you!

[captainblack]

Hello how can I play video from a spesific folder path for example "E:\\video\\x.mp4" ? I don't want to upload

[Hariprasath Lakshmanan]

@NinaW How to store multiple url in usestate which i got from api response??

[NinaW]

@HariprasathLakshmanan, I usually use useEffect to fetch data from api and then useState to make it available (check this link: medium.com/geekculture/…)