使用 reactjs 播放视频 iframe

Posted 2023-03-05

【中文标题】使用 reactjs 播放视频 iframe

【英文标题】：Play video iframe with reactjs

【发布时间】：2021-11-20 11:56:03

【问题描述】：

enter image description here有一个问题。我有一个包含 2 个图像和 1 个视频的滑块，我在 iframe 中嵌入了视频。问题是如何在播放视频时隐藏滑块的 2 个按钮（下一个和上一个）并在视频暂停时显示回来。

【问题讨论】：

您使用的是哪个滑块库？

我正在使用 react-slick

请do not post pictures of text，将该文本放入您的帖子中（使用适当的标记）。

【参考方案1】：

您应该使用this component，它具有内置的 onPlay 和 onStop 功能，可以让您显示或不显示滑块中的箭头。

您可以通过使用箭头属性的状态来实现这一点，当视频正在播放时，该状态将设置为 false，不播放时设置为 true。

这是一个例子：

  <ReactPlayer 
    onPlay=this.handlePlay()
    onPause=this.handlePause()
    url='yourvideourl' />

注意：handlePlay() 应将箭头状态变量的状态设置为 true，handlePause() 设置为 false。

【讨论】：

这对我有用，非常感谢。