Question

165

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

rated 0 times [ 169] [ 4] / answers: 1 / hits: 112008 / 6 Years ago, mon, august 13, 2018, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rocioblancac

Add To Favorites

Follow

Total Points: 699

Total Questions: 96

Total Answers: 108

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

rocioblancac questions

1 Angular: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Mon, Dec 13, 21, 00:00, 2 Years ago

1 Bootstrap multiple file selection - show only first file

Sun, Jul 26, 20, 00:00, 4 Years ago

1 React JS How to disable zoom

Wed, Jul 22, 20, 00:00, 4 Years ago

1 React Native https axios resquest gets Network Error on Android but not iOS

Thu, Jan 16, 20, 00:00, 4 Years ago

1 Color Input in React: The format is #rrggbb where rr, gg, bb are two-digit hexadecimal numbers

Mon, Jan 6, 20, 00:00, 4 Years ago

View All

answered 6 Years ago adrienb · Accepted Answer

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.