Reactjs HTML5视频赢得'；当页面第一次加载时，React应用程序不会自动播放

我一直在尝试在我的React应用程序中使用HTML5视频，并启用自动播放和循环。但当页面第一次加载时，它似乎永远不会工作。但是当我访问其他页面并返回主页（视频所在的位置）时，视频开始播放。我正在使用以下代码：

 <Section gridStart="1366px" bgColor="gradient" type="flex">
      <Block flexBasis="70">
        <video width="100%" autoPlay loop>
          <source src="/videos/ai-vid.mp4" type="video/mp4" />
        </video>
      </Block>
      <Block flexBasis="30">
        <Paragraph>
          <Fade bottom cascade>
            <H2 light>Accessibility</H2>
            <H4 light>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Molestias dolores quia sit harum accusamus quaerat
              repudiandae.
            </H4>
          </Fade>
        </Paragraph>
      </Block>
    </Section>

可达性
Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。
多洛雷斯痣是一种累赘
海豹科。

请告诉我我做错了什么。任何改进此代码的建议，使其能够在所有浏览器和移动设备上运行，他都将不胜感激。顺便说一句，我确实尝试了以下方式加载视频：

import video from 'static/video/ai-vid.mp4'
...
<source src={video} type="video/mp4" />

从“static/video/ai vid.mp4”导入视频
...

---

没有运气，同样的结果。Thanx.

结果表明，浏览器策略阻止了视频自动播放。我只是对视频使用了“静音”属性，现在它在Chrome上播放得很好。

结果显示，视频自动播放是被浏览器策略阻止的。我只需要对视频使用“mute”属性，现在它在Chrome上播放得很好。

由于浏览器策略，只需为自动播放设置mute true。由于浏览器策略，只需为自动播放设置mute true。