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:
I tried this as suggested: src="../Videos/video1.mp4" and I get the same result
5 Answers
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.
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
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 import the video in react.js and that's works for me.
import video from "./video.mp4";
