Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
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
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>
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>
this will also work well without using <source> tag
                Thanks a lot! At first, I got a TypeScript error, but then instead of using import I used require and everything worked flawlessly!
– gignu
                Dec 12, 2022 at 23:38
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 am using the server that is created automatically when you do create-react-app from the github page github.com/facebook/react
– user10211187
                Aug 13, 2018 at 21:56
                Hey it worked thank you! I used this directory after putting the Videos folder in the public directory. ../public/../Videos/video1.mp4
– user10211187
                Aug 13, 2018 at 22:13
                That's the correct relative path from your file. Alternatively, you can put the Video folder in the public directory and use <source src="/Videos/video1.mp4" type="video/mp4"/> . Does the console show any error?
– Shakil Ahmed
                Aug 13, 2018 at 21:58
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>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.