ReactJS和HTM5视频标签呈现了一种奇怪的行为

我有两个带有HTML5视频标签的React演示组件。

这是第一个

export default class Homepage extends React.Component {
  render() {
    return(
      <div className="Homepage">
        <Needs />
        <Mission />
        <Areas />
        <Products />
        <Duty />
        <Video />
        <Flag />
        <div className="video">
          <video autoPlay loop className="bg_video">
            <source src="resources/videos/arqui.mp4" type="video/mp4" />
          </video>
        </div>
      </div>
    )
  }
}

效果非常好。但是这个

export default class Video extends React.Component {
  render() {
    return(
      <div className="Video">
        <video autoPlay controls>
          <source src="resources/videos/sinapi.mp4" type="video/mp4" />
        </video>
      </div>
    )
  }
}

总是失败。视频无法加载。

其他都很好。两个视频都在同一个目录下,我检查了它们:它们在那里,而且名称正确。它们在源属性中的提及方式完全相同。

我的静态服务器运行良好,因为所有其他图像和视频都加载得非常好。

第一个视频是用户作为背景。如你所见,第二个在上面。这个 <Video />

有没有已知的限制,在同一页或类似的东西提供两个视频?

建议?