我有一个带有多个图像的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();
播放视频,实质上是自动播放视频。但是,当我通过单击图像时首先将视频加载到模式中来执行此操作时,一旦视频加载,在onready函数上调用时,视频event.target.playVideo();
不起作用:_onReady(event) {
// access to player in all event handlers via event.target
event.target.playVideo();
}
有什么方法可以加载视频,然后在单击功能发生之前自动在单击功能上自动播放而不加载视频吗?
最佳答案
不,没有真正的用户点击就无法开始播放视频(如果您以编程方式触发点击,浏览器会理解这不是真正的用户操作)。
用户点击图片时,YT iframe必须已经在DOM中才能开始播放视频。
关于javascript - React-通过点击事件在手机上自动播放视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46790952/