【问题标题】：HTML5 video won't auto play in a React App when the page loads for the first time第一次加载页面时，HTML5 视频不会在 React 应用程序中自动播放
【发布时间】：2019-01-21 05:27:03
【问题描述】：

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

没有运气，同样的结果。谢谢。

【问题讨论】：

由于浏览器政策，只需将自动播放设置为静音

标签： reactjs mobile html5-video

【解决方案1】：

原来浏览器政策阻止了视频自动播放。我只需要对视频使用“静音”属性，现在它可以在 Chrome 上正常播放。

【讨论】：

【解决方案2】：

这对我有用

确保使用 autoPlay 而不是 autoplay 进行反应。
另加muted

如果你想使用带有小写字母的autoplay，你应该赋值autoplay="true"

【讨论】：