Как остановить игру React Player при закрытии модального режима?

Question

Я использую React Player npm install для проекта React. Видеоплеер в модале. Как мне остановить его воспроизведение, когда модал закрывается? Есть ли ReactPlayer.stop() или ReactPlayer.pause() тип функциональности, который я могу добавить в свой hideModal функционировать?

<Modal show={this.state.show} handleClose={this.hideModal} >               
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' width='100%'
height='100%' />
</Modal> 

Answer 1

Если this.state.show возвращает логическое значение (true/false), которым вы можете управлять через состояние вроде этого:

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing={this.state.show} width='100%' height='100%' />

Answer 2

У viciousP есть правильный ответ, но я думаю, что стоит показать пример полного кода, чтобы другие могли точно увидеть, как это работает.

Использование хука состояния

      import React, { useState } from 'react';
import ReactPlayer from 'react-player';

function Video() {

    const video_source = "https://vimeo.com/blahblah";

    function close_video() {
        setPlay(false)
    }

    const [play, setPlay] = useState(true);

    return(
        <ReactPlayer id="video" url={video_source} playing={play}/>
    )

}

export default Video;

Теперь вы можете программно остановить воспроизведение видео, вызвав close_video()

Answer 3

Для меня лучше работает этот пример, ключевой момент для совместного использования onPlay, onPause и play prop

      function VideoModal({ isShow, onClose, source }: any) {
  const [isPlaying, setPlaying] = useState(false)
  

  return (
    <AppModal 
      onClose={() => {
        setPlaying(false)
        onClose()
      }}
      isShow={isShow}
    >
        <ReactPlayer
          playing={isPlaying} 
          height='100%' 
          width="100%" 
          controls={true} 
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
          url={source} 
        />
    </AppModal>
  )
}