HTML5 视频在页面首次加载时不会在 React 应用程序中自动播放

Question

我一直在尝试在我的 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>

请让我知道我在这里做错了什么。任何改进此代码以使其在所有浏览器和移动设备上运行的建议都将受到高度赞赏。顺便说一句，我确实尝试通过以下方式加载视频：

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

而且没有运气，结果一样。谢谢。

Answer 1

事实证明，浏览器策略阻止了视频自动播放。我只需要对视频使用"静音"属性，现在它在 Chrome 上播放正常。

Answer 2

这对

我有用

• 确保使用 autoPlay 而不是 autoplay 来做出反应。
• 同时添加muted

如果要将autoplay与小写字母一起使用，则应将值分配autoplay="true"