Question

我一直在尝试在启用自动播放和循环功能的React App中使用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>

Plz，让我知道我在这里做错了什么。他强烈建议您改进此代码，使其在所有浏览器和移动设备上运行。顺便说一句，我确实尝试通过以下方式加载视频：

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

没有运气，结果也一样。谢谢。

Answer 1

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

首次加载页面时，HTML5视频不会在React App中自动播放

1 个答案: