Javascript React播放器添加自定义播放按钮和叠加img

我正在为我的react网站使用插件。我想添加自定义播放按钮，并在vimeo视频上覆盖图像，如下图

当我点击播放按钮覆盖图像和按钮需要隐藏和视频开始播放

玩家链接：

{播放？'Pause'：'Play'}>

• 使用播放按钮的

  播放图标

  道具。这可以是JSX元素
• 将海报图像URL传递到

  light

  prop

请编辑问题，将其限制为特定问题，并提供足够详细的信息，以确定适当的答案。到目前为止，我在你的帖子中看不到任何问题描述。你能说得具体点吗？@keikai更新。这里的例子很好。但为什么它在加载视频之前会闪烁白屏？我面临着同样的问题，你能在播放视频之前解决白屏问题吗？在视频实际加载之前（单击灯光道具设置的自定义缩略图后），我面临着几分钟的白屏问题。到目前为止，我还没有找到任何解决办法。光道具一经过就发生了。因此，例如，如果您删除“playIcon”道具，单击缩略图时会出现相同的白色屏幕。

<section className="vm-video">
    <div className="play-btn" onClick={this.handlePlayPause}>{playing ? 'Pause' : 'Play'}>
        <div className="arrow"></div>
    </div>
    <div className="video-preview">
        <img src={videopreviewpic} className="img-fluid" alt="video-preview-img" />
    </div>
    <div className="vc-container player-wrapper">
        <ReactPlayer onPlay={this.handlePlay} url='https://vimeo.com/361808343' className="react-player" controls width='100%' height='100%' />
    </div>
</section>

<ReactPlayer
  url="https://vimeo.com/243556536"
  width="100%"
  height="500px"
  playing
  playIcon={<button>Play</button>}
  light="https://i.stack.imgur.com/zw9Iz.png"
/>