如何调用react-player的stop方法停止并结束视频播放？

react-player 没有内置公开的stop实例方法，你已经通过ref绑定了播放器实例到this.player上，直接基于该实例实现停止逻辑即可：

• 基础停止效果（暂停播放+进度归零）
  你可以直接封装一个停止方法，在需要触发停止的逻辑里调用即可：

// 封装停止方法
stopVideo = () => {
  // 先判断播放器实例是否存在，避免报错
  if (!this.player) return
  this.player.pause()
  this.player.seekTo(0)
}

• 完全结束播放（移除视频源）
  如果需要彻底结束播放、清除当前视频的加载状态，可以把视频地址存在state中，停止时直接置空地址：

// 初始化state存储视频地址
state = {
  videoUrl: VIMEO_URL
}

stopVideo = () => {
  if (!this.player) return
  this.player.pause()
  this.player.seekTo(0)
  // 置空视频地址，移除播放器加载的视频资源
  this.setState({ videoUrl: '' })
}

对应修改组件的url属性即可：

<ReactPlayer
  className="react-player mw-100 w-100 "
  id="myPlayer"
  ref={(player) => {
    this.player = player;
  }}
  url={this.state.videoUrl}
  // 其余属性保持不变
  onStart={() => {
    this.player.seekTo(this.getProgress());
  }}
  onPlay={() => this.play(this)}
  onPause={() => this.pause()}
  onDuration={this.handleDuration}
  onProgress={this._recordProgress}
  onReady={() => this.player.seekTo(this.getProgress())}
/>;

如果是函数式组件开发场景，替换class的ref为useRef即可，核心逻辑完全一致。

内容的提问来源于stack exchange，提问作者Chandra Prakash