如何在使用 React Player 更改 url 时停止播放加载的视频并加载新视频？答案

【问题标题】：How to stop playing loaded video and load a new one when url changes using React Player?如何在使用 React Player 更改 url 时停止播放加载的视频并加载新视频？
【发布时间】：2020-10-20 17:17:46
【问题描述】：

我将React Player 添加到我的应用程序中，它看起来像：

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

它工作正常，但是当我更改 url 时没有任何反应，我想知道如何在 url 更改时停止当前视频并加载新视频？

【问题讨论】：

标签： reactjs react-player

【解决方案1】：

当您更改 url 时，可能有一些逻辑会阻止 ReactPlayer 中的实际视频标签重新呈现，理论上，当您设置一个键并更改该键时，一个组件将完全重新呈现。

让我们试试这个：

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

【讨论】：

我相信它有效，但在我的情况下，我认为我做错了什么，您能否将您的答案扩展为这个完整的示例？我在放置组件的位置添加了渲染方法并添加了调用此方法的按钮，但没有任何反应:(
我创建了一个不需要事件的代码框key 仍然可以更改视频：codesandbox.io/s/great-agnesi-iqir9?file=/src/App.js 我认为您的渲染器可以使用您的组件的全部代码吗？