ReactJS和HTM5视频标签呈现出奇怪的行为

Question

我有两个带有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>
    )
  }
}

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

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

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

第一个视频已被用户用作背景。如您所见，第二个就放在上面。我的JSX中的<Video />标签可以做到这一点。

在同一个页面或类似页面上放两个视频是否存在已知限制？这是我现在唯一想到的事情。

建议？

Answer 1

出现问题是视频编码。由于某种原因，当我从客户的旧网站下载视频时，我将Matroska转换为MP4导致了某种问题。我检查了请求结果的有效负载，发现视频已加载，但浏览器无法展示它。

感谢所有建议。