React - 通过点击事件在移动设备上自动播放视频

Question

我有一个包含多个图像的 React 应用程序。单击图像时，它会打开一个模态，其中通过 iframe api 加载 youtube 视频。

我正在使用它来加载视频 iframe https://www.npmjs.com/package/react-youtube

使用状态 modalVisible: true/false 有条件地向 DOM 添加和删除模态框。

{this.state.modalVisible ?  <div className="Modal"><YouTube videoId="2g811Eo7K8U" onReady={this._onReady} /></div> : null}

这很棒，因为它只会在需要时才加载视频，而不是在页面加载时加载视频的传统模式，然后在需要时显示块以显示模式。

但是在移动视频上无法自动播放 (https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations)，因此使用传统的隐藏/显示预加载模态时，我可以在单击图像以显示模态时调用一个函数，并使用 event.target.playVideo(); 来播放视频，本质上是自动播放它。但是当我通过在单击图像时首先将视频加载到模式中来做到这一点时，视频event.target.playVideo(); 在视频加载后调用 onready 函数时不起作用：

_onReady(event) {
    // access to player in all event handlers via event.target
    event.target.playVideo();
}

有没有什么方法可以加载视频然后在点击功能上自动播放而不在点击事件发生之前加载视频？

Answer 1

不，没有真正的用户点击就无法启动视频（如果您以编程方式触发点击，浏览器会理解这不是真正的用户操作）。

当用户点击图片时，YT iframe 必须已经在 DOM 中才能开始播放视频。