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

Question

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

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

模态使用状态模态有条件地添加和删除到 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();播放视频时调用函数基本上自动播放它。但是当我通过在单击图像时首先将视频加载到模态中来执行此操作时，视频加载后在 onready 函数上调用时event.target.playVideo();不起作用：

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

有没有办法加载视频然后在点击功能上自动播放，而无需在点击事件发生之前加载视频？

Answer 1

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

YT iframe 必须已经在 DOM 中才能在用户单击图像时开始视频。