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

Question

我正在为我的反应网站使用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>

Answer 1

使用playIcon播放按钮的道具。这可以是一个 JSX 元素。将海报图片 URL 传递给lightprop。<ReactPlayer&nbsp; url="https://vimeo.com/243556536"&nbsp; width="100%"&nbsp; height="500px"&nbsp; playing&nbsp; playIcon={<button>Play</button>}&nbsp; light="https://i.stack.imgur.com/zw9Iz.png"/>