使用 React 使 YouTube 视频自动播放

Posted 2023-02-24

【中文标题】使用 React 使 YouTube 视频自动播放

【英文标题】：Make YouTube video autoplay using React

【发布时间】：2020-01-21 10:36:05

【问题描述】：

我正在尝试使用 react 让我的视频自动播放。添加autoplay=1 作为参数不起作用。有什么建议吗？`

这是我的代码。

<div
  className="video mt-5"
  style=
         position: "relative",
         paddingBottom: "56.25%" /* 16:9 */,
         paddingTop: 25,
         height: 0
       
>
    <iframe
       style=
             position: "absolute",
             top: 0,
             left: 0,
             width: "100%",
             height: "100%"
             
        src='https://www.youtube.com/embed/hEnr6Ewpu_U?'
        frameBorder="0"
    />
</div>

【问题讨论】：

“将 autoplay=1 添加为参数不起作用” - 那么您可能是在不不应该的环境中尝试此操作首先？在移动浏览器中，自动播放的尝试通常会被阻止，并且需要明确的用户交互才能开始播放。

【参考方案1】：

我不会使用<iframe>，因为当您访问 Youtube 时，您仍然需要点击才能播放。我会使用一个名为 react-player 的库

import ReactPlayer from "react-player";

<ReactPlayer
  url=props.url
  playing=true
  width=props.width
  height=props.height
/>

它会自动播放:)

【讨论】：

播放 true 不会让您自动播放，但如果您添加 muted true 这将完美运行 Ref:theverge.com/2018/3/22/17150870/…

让 Autoplay 正常工作的常规 html 不适用于我的 React 项目，但使用 ReactPlayer 做到了！

【参考方案2】：

根据 2018 年 youtube 政策的变化，他们省略了自动播放有声视频的选项。如果您想静音自动播放，仍然可以选择使用 iframe：

<iframe src='https://www.youtube.com/embed/hEnr6Ewpu_U?autoplay=1&mute=1'
        frameBorder='0'
        allow='autoplay; encrypted-media'
        allowFullScreen
        title='video'
/>

【参考方案3】：

这为我解决了这个问题

如果你在反应中使用<video>

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

<video autoPlay muted src="/vid.mp4" />

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