bug, dynamic update of <source(s)> and <track(s)> seems to be ignored

[belgattitude]

Took me a while to figure out, and it's not related to ReactPlayer but good to keep a note.

(update seems to affect Chrome too: play with effect https://soluble.io/react-player/demo/ (click multiple bunny then multiple elephant))

Setting new FilePlayer sources urls or tracks on an already loaded video does not actually reload the <video> url under Firefox (at least Firefox 61 - Ubuntu 18.04). Chrome works as expected does not work neither.

Setting the video url as a string works, I'm referring specifically to multiple sources or tracks like:

<ReactPlayer
  playing
  url={[
    {src: 'foo.webm', type: 'video/webm'},
    {src: 'foo.ogg', type: 'video/ogg'}
  ]},
 config={{ file: {
    tracks: [
      {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},
      {kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'}
    ]
  }}}
/>

To be sure I does not come from my code, I've updated the demo app.js to include 2 buttons with multiple sources. To reproduce: clone and yarn start https://github.com/belgattitude/react-player.git or see https://github.com/CookPete/react-player/compare/master...belgattitude:test-video-url-change-ignored?expand=1

Changing the source location from Firebug is also affected.

This bug is very annoying in my case, because video are loaded from a list... Props urls are well updated.

[belgattitude]

I'm currently trying to figure out how I can circumvent this bug. Any help greatly appreciated.. from MDN (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement), I've seen we can reload the MediaElement:

HTMLMediaElement.load()
Resets the media element and restarts the media resource. Any pending events are discarded. How much media data is fetched is still affected by the preload attribute. This method can be useful for releasing resources after any src attribute and source element descendants have been removed. Otherwise, it is usually unnecessary to use this method, unless required to rescan source element children after dynamic changes.

Would it be possible in the library to call such a method on <source> or <tracks> update ?

[belgattitude]

To see the effect in action:

https://soluble.io/react-player/demo/

First click on 'Multiple Bunny' then 'Multiple Elephant' (elephant video loading will be ignored)... Repeat switching between them and you'll start seing:

ReactPlayer: the attempt to load [object Object],[...] is being deferred until the player has loaded

[belgattitude]

#482 should fix it