Video isn't playing in my React app when trying to import a video component and html video tag-CodePudding

I'm trying to import a video to my JSX but the video doesn't seem to play, it acts like an image. Here's what I've tried:

import React from "react";
import MyVideoComponent from "./MyVideoComponent";
const Video = () => {
  return (
    <div className="w-full max-w-[800px] sm:h-[704px] h-[680px] bg-white flex flex-col sm:justify-between justify-center items-center mx-auto p-4">
      <div>
        <div className="h-[10%] flex items-center relative">
          <div className="h-[100%] w-[8%] bg-gray-200"></div>
          <div className="flex items-center">
            <h5 className="text-sm py-2 text-[#575e72] font-mono left-9 absolute">
              VIDEO TITLE
            </h5>
          </div>
        </div>
        <div className="my-5 py-4 px-1 w-[80%]">
          <h1 className="text-4xl  font-bold text-[#061237]">
            Inform users with video sections
          </h1>
        </div>
        <div>
          <MyVideoComponent />
        </div>
      </div>
    </div>
  );
};

export default Video;

MyVideoComponent:

import React from "react";
import MyVideo from "../assets/video.mp4";

class MyVideoComponent extends React.Component {
  render() {
    return (
      <video width="100%" height="100%" preload="auto">
        <source src={MyVideo} type="video/mp4" />
        Your browser does not support HTML5 video.
      </video>
    );
  }
}

export default MyVideoComponent;

I've also tried using the code below instead of importing MyVideoComponent component

<video width="auto" height="auto" autoplay>
  <source src={require('../assets/video.mp4')} />
</video>

CodePudding user response：

This is common problem when you deal with html5 tag in react. You need toJust set a name for the autoplay attribute or use autoPlay. In addition, set the muted tag for the video. Chrome for instance block autoplay videos that have sound.

The code structure should look like this