javascript - 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}

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

但是，在移动视频上无法自动播放( 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 中，才能在用户单击图像时启动视频。