CODEWITHSUNDEEP
javascriptreactjshtml5-video
Tomáš Vrána
Tomáš Vrána

Reputation: 124

React video element is not working properly

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;

Upvotes: 3

Views: 16196

Answers (1)

Michalis Garganourakis
Michalis Garganourakis

Reputation: 2930

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.

Upvotes: 6

Related Questions