防止在 React Player 中点击 youtube 视频 link

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

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

感谢 Advavce

Answer 1

尝试event.preventDefault()； event.stoppropagation();在点击处理程序中。如果不起作用 post post 你的代码片段。

Answer 2

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

所以如果你想阻止用户点击 youtube link，你可以创建一个透明覆盖层，其 z-index 大于你的视频播放器，这样用户就不能点击 youtube link.当然，不要覆盖 play/pause 按钮 :')

防止在 React Player 中点击 youtube 视频 link

Prevent to click on you tube video link in react player

reactjs

react-player