使用 reactjs 播放视频 iframe

Question

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

Answer 1

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

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

这是一个例子：

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

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