如何在react应用程序中自动播放嵌入的视频?

Question

我遵循了几个建议，使youtube视频自动播放，但不能做到这一点。我的代码如下:

第一次尝试(原始嵌入代码直接从youtube获得):

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<iframe className='w-full md:h-[550px] h-[300px] rounded-lg' src="https://www.youtube.com/embed/wkTFd3QZSP0" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

第二次尝试(使用'autoPlay'而不是'autoPlay'并使用'mute '):

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<iframe className='w-full md:h-[550px] h-[300px] rounded-lg' src="https://www.youtube.com/embed/wkTFd3QZSP0" title="YouTube video player" frameBorder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" autoPlay muted allowFullScreen></iframe>

我也尝试过"反应玩家";不幸的是，这些都不起作用。

Answer 1

您需要在YouTube视频链接后添加查询参数。

autoplay不静音播放

你可以跟随。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ycDeZBYy074?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>