第一次加载页面时，HTML5视频不会在React应用程序中自动播放
第一次加载页面时，HTML5视频不会在React应用程序中自动播放
提问于 2019-01-21 13: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" />没有运气，同样的结果。谢谢。
回答 2
Stack Overflow用户
发布于 2019-01-22 08:50:23
原来视频自动播放是被浏览器策略阻止的。我只需要对视频使用'muted‘属性，现在它在Chrome上播放得很好。
Stack Overflow用户
发布于 2021-09-19 15:36:20
这对我很有效
对于react，请确保使用autoPlay而不是autoplay。
- 还会添加
muted
如果要使用带有小写字母的autoplay，则应指定值autoplay="true"
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54283915
复制相关文章
相似问题
腾讯云开发者
