24

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;
Alan Abraham
  • 241
  • 1
  • 2
  • 3

6 Answers6

21

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. enter image description here

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;
AWolf
  • 8,770
  • 5
  • 33
  • 39
18

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} />
sivarasan
  • 320
  • 3
  • 10
9

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'
            />
Abhishek Kumar
  • 820
  • 12
  • 16
6

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>
    )
  }
}

```
NinaW
  • 638
  • 3
  • 7
  • 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 ? – Alan Abraham Mar 21 '20 at 23:30
  • 1
    My import link was just an example, so you need to import your file from it's location in your folder. – NinaW Mar 21 '20 at 23:45
  • If it doesn't work, there may be a problem with the mp4 format. https://github.com/facebook/create-react-app/issues/6822 (assuming you are using Create React App) – NinaW Mar 22 '20 at 00:17
  • @NinaW How to store multiple url in usestate which i got from api response?? – Hariprasath Lakshmanan May 26 '22 at 06:05
  • 1
    @HariprasathLakshmanan, I usually use useEffect to fetch data from api and then useState to make it available (check this link: https://medium.com/geekculture/simple-data-fetching-in-react-with-the-fetch-api-and-axios-with-hooks-useeffect-and-usestate-85d6bd7357c2) – NinaW May 29 '22 at 19:30
2

Just use the Video HTML element. ReactPlayer didn't work because I couldn't get the thumbnail to show correctly. (poster attribute works perfectly).

Example:

import React, { Component } from 'react'

class Video extends Component {
    render() {
        return (
                <div className='player-wrapper'>
                <video controls
                    src='/Slam Dunk Contest 2008.mp4'
                    poster='https://user-images.githubusercontent.com/28612032/172026551-e5a96748-d724-4a08-b6b3-f44655d4ef39.png'
                    width="820">

                    Sorry, your browser doesn't support embedded videos,
                    but don't worry, you can <a href="https://user-images.githubusercontent.com/28612032/172026908-7c33e4cc-ebe5-40de-b9cc-009d12a7ced2.mp4">download it</a>
                    and watch it with your favorite video player!

                </video>
                </div>
        )
    }
}

export default Video;
Joe Shakely
  • 623
  • 7
  • 9
0

note that video will show when you build production. develop isn't.

Nguyễn Văn Thành
  • 1
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – pierpy Apr 24 '23 at 16:43