为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

明月笑刀无情 2022-05-22 13:58:12
我正在为我的反应网站使用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>
查看完整描述

1 回答

?
慕容708150

TA贡献1831条经验 获得超4个赞

  • 使用playIcon播放按钮的道具。这可以是一个 JSX 元素。

  • 将海报图片 URL 传递给lightprop。

<ReactPlayer

  url="https://vimeo.com/243556536"

  width="100%"

  height="500px"

  playing

  playIcon={<button>Play</button>}

  light="https://i.stack.imgur.com/zw9Iz.png"

/>


查看完整回答
反对 回复 2022-05-22
  • 1 回答
  • 0 关注
  • 322 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信