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

Question

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

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

使用状态modalVisible有条件地添加模态并将其移除到DOM：true / false。

{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中启动视频。