时间戳

首页 > 解决方案 > 第一次加载页面时，HTML5 视频不会在 React 应用程序中自动播放

reactjs - 第一次加载页面时，HTML5 视频不会在 React 应用程序中自动播放

问题描述

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

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

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

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

标签： reactjsmobilehtml5-video

解决方案

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

推荐阅读