javascript - React video element is not working properly - Stack Overflow

admin管理员组

文章数量:1310228

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 "./ponents2/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;

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 "./ponents2/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;

• javascript
• reactjs
• html5-video

Share Improve this question Follow edited Jan 10, 2020 at 21:36 Michalis Garganourakis 2,93011 gold badge1313 silver badges2525 bronze badges asked Jan 9, 2020 at 19:26 Tomáš VránaTomáš Vrána 12411 gold badge11 silver badge88 bronze badges 8

• 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 Hernandez Commented Jan 9, 2020 at 19:33
• no there is no errors in console or in web inspect tools – Tomáš Vrána Commented Jan 9, 2020 at 19:39
• 1 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 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./en/tutorials/video/basics/devstories.mp4" type="video/mp4" ></source> </video> – 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 Commented Jan 9, 2020 at 21:11

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 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 "./ponents2/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.

本文标签： javascriptReact video element is not working properlyStack Overflow