CODEWITHSUNDEEP
javascripthtmlreactjs
user10211187
user10211187

Reputation:

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

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

Upvotes: 31

Views: 179603

Answers (7)

wormondeck
wormondeck

Reputation: 1

i had a similar issue and replaced the video element with the self closing iFrame element instead for react.

Upvotes: 0

Cibiyanna26
Cibiyanna26

Reputation: 13

This you will be able to use video tag like and if you want to make it play infinity time you can set autoPlay and loop

<div className="w-full h-screen relative">
      <video autoPlay loop muted className="w-full h-full object-cover">
           <source src={Loader} type="video/mp4" />
           Your browser does not support the video tag.
      </video>
</div>

you can give the path for the video in this way ...

import Loader from '../../assets/loader.mp4'

Upvotes: 0

Rahul Ahire
Rahul Ahire

Reputation: 825

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

Upvotes: 37

subhajit das
subhajit das

Reputation: 445

I import the video in react.js and that's works for me.

import video from "./video.mp4";

Upvotes: 0

Nipun Gupta
Nipun Gupta

Reputation: 95

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>

Upvotes: 4

Dacre Denny
Dacre Denny

Reputation: 30390

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.

Upvotes: 27

Shakil Ahmed
Shakil Ahmed

Reputation: 301

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

Upvotes: 3

Related Questions