防止点击反应播放器中的 youtube 视频链接

Question

我在我的 react 项目中使用 ReactPlayer https://www.npmjs.com/package/react-player 并且它正在工作，但问题是当我放置任何 youtube 视频 url 时，所有 youtube 视频系列都显示播放器的底部，如果每当我点击该 youtube 视频标题时它正在重定向到 youtube 网站。

<ReactPlayer
 onProgress={() => this.progress(this.state.vid[0].vid.videotext)}
 onEnded={(e)=>this.onEnded(e,this.state.vid[0]._id)}  url={this.state.vid[0].videourl} controls={true} playing={false} />}

所以我只想禁用所有东西，可以使用任何方式吗？ 非常感谢您的帮助

感谢您的建议

Answer 1

试试 event.preventDefault(); event.stoppropagation();在点击处理程序中。 如果没有工作，请发布您的代码 sn-p。

Answer 2

Youtube 视频是在 iframe 中打开的（您将通过浏览器检查看到它），并且您不能禁用 iframe 中的功能（出于安全原因）。

因此，如果您想阻止用户点击 youtube 链接，您可以创建一个透明叠加层，其 z-index 大于您的视频播放器，然后用户无法点击 youtube 链接。当然，不要覆盖播放/暂停按钮:')