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

Question

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

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

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

Answer 1

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

让我们试试这个：

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