React video element is not working properly

Question

I am trying to put video background on my site but when I put video tag to my react script it start endlessly loading on Firefox and when I try it on chrome it shows the video at 0 seconds I've tried .mp4 and .mov formats without success.

import React, { Component } from "react";
import "./App.css";
import LogginScreen from "./components2/LogginScreen";

class App extends Component {
  render() {
    return (
      <div>
        <LogginScreen></LogginScreen>
        <video controls autoPlay loop muted>
          <source src="hd1992.mov" type="video/mov"></source>
        </video>
      </div>
    );
  }
}
export default App;

Are there any errors shown in the console for both firefox and chrome? If yes please edit your post and add them in there so we can help you better. — Kevin H
– Kevin H, Commented Jan 9, 2020 at 19:33
i tryed play video linked from YouTube and everything working correctly when i use iframe but i need it to be a backgraund so this is pointless. — Tomáš Vrána
– Tomáš Vrána, Commented Jan 9, 2020 at 20:15
i do not know why but when I put this code in JavaScript file it work <video autoplay muted loop name="media"> <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4" ></source> </video> — Tomáš Vrána
– Tomáš Vrána, Commented Jan 9, 2020 at 20:44
it seems like the only way how i can play video is by linking it — Tomáš Vrána
– Tomáš Vrána, Commented Jan 9, 2020 at 21:11

Michalis Garganourakis · Accepted Answer · 2020-01-09 22:39:12Z

6

This is related both to the video file type .mov and the way you import your video.

Try to change your type attribute to type="video/mp4" even though it's a .mov and import your video like below:

import React, { Component } from "react";
import "./App.css";
import LogginScreen from "./components2/LogginScreen";
import myVideo from "./hd1992.mov";

class App extends Component {
  render() {
    return (
      <div>
        <LogginScreen></LogginScreen>
        <video controls autoPlay loop muted>
          <source src={myVideo} type="video/mp4"></source>
        </video>
      </div>
    );
  }
}

export default App;

Here is a working example.

I hope this solves your issue.

edited Jan 9, 2020 at 22:39

answered Jan 9, 2020 at 22:14

Michalis Garganourakis

2,9401 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rondev Over a year ago

I have no idea why but when I do <video src='video url' /> it doesn't work. But then, when I imported it just like you did, it works, thanks man

Collectives™ on Stack Overflow

React video element is not working properly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related