CODEWITHSUNDEEP
reactjshtml5-videosrc
kevin godfrey
kevin godfrey

Reputation: 183

Video tag with autoplay does not work in react

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <video src="../public/One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>
    </div>
  );
}

export default App;

The above code was created with npx create-react-app, I just happened to add a video tag to it.

Although the page loads the video doesn't play or show up. at first, I thought maybe the video type is causing this, but as you can see the poster attribute was right there.

So my next suspicion was the video tag. so I placed it inside an HTML file, placed it in the same folder, and ran it with a live server, and managed to get it working.

Now I could ask you guys why isn't this working for react? now

but I actually managed to find a pseudo solution.

<video src="./One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>

I just changed the src attribute. and it worked.

note- I had the same video in my current directory as well.

but obviously, I don't want to place my resources in the src folder(the current folder).

So my question is: How do I place the video in public/or any other folder which is outside src and make it work?

Upvotes: 1

Views: 3613

Answers (1)

Adel Tahir
Adel Tahir

Reputation: 155

I don't have enough reputations to comment, so add this as an answer.

Please try this (without . before /One-D.mp4):

<video src="/One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>

Upvotes: 3

Related Questions