How to stop playing loaded video and load a new one when url changes using React Player?

Question

I added the React Player into my application and it look like:

 {videos ? <ReactPlayer url={`https://www.youtube.com/watch?v=${videos.id.videoId}`} />
         :
  <h1>No video</h1>}

It works fine, but when i change url nothing happens, i would like to know how can i stop current video and load a new one whe, url changes ?

Answer 1

There might some logic which prevent the actual video tag in ReactPlayer re-render when you change url, Theoretically, A component will be completely re-rendered when you set a key an change that key.

Let try this:

<ReactPlayer key={`https://www.youtube.com/watch?v=${videos.id.videoId}` url={`https://www.youtube.com/watch?v=${videos.id.videoId}`} />