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

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.

You missed a forward slash /. It should be <source src="../Videos/video1.mp4" type="video/mp4"/>

You can use the 'require' function, like this:

<video width="auto" height="auto" autoplay>
  <source src={require('../assets/video.mp4')} type="video/ogg"/>
Your browser does not support the video tag.
</video>

I also landed in this same issue a few days back ago, but I found out the original way of solving this issue with the native React.JS style.

for your scenario, lets say you want to import video locally in your project file into react app then, instead of using native HTML syntax for eg:

<video width="750" height="500" controls >
      <source src="./Videos/video1.mp4" type="video/mp4"/>
</video>

which for me didn't worked for me in my case for my project. So I just slightly modified the code in following manner and it worked flawlessly.

You need to import the video as a certain entity in react just like how to import any other npm packages/modules

for eg in you your case you need to do these slight changes:

import React, { Component } from 'react'
import video from './Videos.video1.mp4'

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

or

import React, { Component } from 'react'
import video from './Videos.video1.mp4'

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

this will also work well without using <source> tag