How to play video in react.js using html video tag?

Issue

Does anyone know why my video does not load? It shows the player but no video.

  class App extends Component {
  render() {
    return (
      <div className="App">
      <p>hello</p>
      <video width="750" height="500" controls >
      <source src="..Videos/video1.mp4" type="video/mp4"/>
     </video>
      </div>
    );
  }   
}

This is how my directory is structured:

Directory React App

I tried this as suggested: src="../Videos/video1.mp4" and I get the same result

Solution

This may be due to a number of factors, namely, your server's configuration.

Assuming that your server is able to serve mp4 files correctly, and is running from the my-app directory, then you should be able to resolve the issue by adding a / to the beginning of your src attribute:

<source src="/Videos/video1.mp4" type="video/mp4"/>

If you've created your project via create-react-app, then you will want to create a Videos folder under the public directory, and put your video file there, seeing this is where public assets are served from by default.

So, put your video file in my-app/public/Videos/video1.mp4. Then clear your browser cache, and rebuild and reload your app.

Answered By - Dacre Denny