0

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 ?

Uladz Kha
  • 2,154
  • 4
  • 40
  • 61

1 Answers1

2

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}`} />
Tony Nguyen
  • 3,298
  • 11
  • 19
  • I believe it works, but not in my case, I think I do something wrong, could you please extend your answer this full example ? I added render method where placed Component and added button which calls this method, but nothing happens :( – Uladz Kha Jun 30 '20 at 12:43
  • 1
    I create a codesanbox which don't event need `key` still can change video:https://codesandbox.io/s/great-agnesi-iqir9?file=/src/App.js I think something working with your render, could you all full code of your component? – Tony Nguyen Jun 30 '20 at 12:57