Video HTML tag is not playing in React.js-CodePudding

My video is showing the first frame, but it is not autoplaying nor can I see any of the controls for the video.

https://codesandbox.io/s/awesome-wildflower-np18f?file=/src/App.js

CodePudding user response：

import "./styles.css";

export default function App() {
  return (
    <>
      <header>
        <video autoPlay muted loop id="homeVideo"> //  I changed autoplay to autoPlay
          <source
            src="https://socialarthouse.s3.us-east-2.amazonaws.com/Black.mp4"
            type="video/mp4"
          />
          Your browser does not support HTML5 video.
        </video>
      </header>
    </>
  );
}

CodePudding user response：

Add controls attribute to the video element. And add onl oad handler that plays video.

<video controls onl oad='this.play()'/>