我尝试将一个视频导入到我的JSX中，但视频似乎无法播放，它表现得像一个图像。以下是我尝试的方法：

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;

我的视频组件：

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;

我还尝试使用下面的代码，而不是导入MyVideoComponent组件

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