React Player 添加自定义播放按钮和覆盖 img答案

【问题标题】：React Player add custom play button and overlay imgReact Player 添加自定义播放按钮和覆盖 img
【发布时间】：2020-06-28 06:30:20
【问题描述】：

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

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

播放器链接在这里： https://jsfiddle.net/e6w3rtj1/

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

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。到目前为止，我在您的帖子中看不到任何问题描述。能具体点吗？
@keikai 已更新。示例在这里jsfiddle.net/e6w3rtj1

标签： javascript jquery html reactjs react-player

【解决方案1】：

使用playIcon 属性作为播放按钮。这可以是一个 JSX 元素。
将海报图片 URL 传递给 light 道具。

Example

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

【讨论】：

非常好。但是为什么在加载视频之前它会闪烁白屏呢？
我也遇到了同样的问题，你能在播放视频前解决白屏吗？
在视频实际加载之前（点击由灯光道具设置的自定义缩略图之后），我正面临片刻的白屏。到目前为止，我还没有找到任何解决方案。一旦灯光道具通过，它就会发生。因此，例如，如果您删除“playIcon”道具，点击缩略图时会出现相同的白屏。