Captions not working after loading new video when page already generated

[TroyJenkinsRoon]

Current Behavior

I am generating a web page with the ability to watch different videos on the given page. I am only loading one ReactPlayer object and using useState to shift out which video (Vimeo) url I am pointing to. When a user clicks a button the page stays the same but loads a new video url into the ReactPlayer component. The new video loads correctly and everything looks and works as expected except for the subtitles.

I am loading the subtitles to automatically turn on using the following prop:

config={{ file: { tracks: [ { src: url, kind: 'subtitles', srcLang: 'en', default: true, label: 'English', }, ], }, }}

This configuration successfully loads and turns on subtitles for the first video that loads when the page opens, however, when the new video is loaded subtitles no longer work. This holds true for just using Vimeo controls option as well. I cannot turn on captions on for the second video loaded into the screen, unless that video is loaded first.

I have added a key to the ReactPlayer component in an attempt to force a reload but that doesn't work either. Is there a way to force update the react play or any other option that might work?

Expected Behavior

Should be able to change the url being passed to the React Player and subtitle options should still load and work as expected.

Steps to Reproduce

1. Generate a new array of video urls const urlsArr = [ "myurl.com/", "myurl.com/", "myurl.com/", "myurl.com/" ]

2. Generate a react player and display it on the web page passing the url from urlsArr const myVideoPlayerPage = () => {

    const [videoIdx, setVideoIdx] = useState(0);
   
    return (
       <ReactPlayer
          key={urlsArr[videoIdx]}
          url={urlsArr[videoIdx]}
          config={{
            file: {
              tracks: [
                {
                   src: urlsArr[videoIdx],
                   kind: 'subtitles',
                   srcLang: 'en',
                   default: true,
                   label: 'English',
                },
             ],
           },
         }}
       />
     }
   

3. Add a button that loads the new url when clicked <Button onClick={() => setVideoIdx(videoIdx+1)} >Next Video</Button>

The code above successfully loads the video with working subtitles for any video that is loaded first. However, the second video loaded next after the button is clicked won't work with subtitles. Just the video and audio work.

Environment

• URL attempting to play:
• Browser: chrome
• Operating system: apple

[Karyum]

For anyone dealing with this issue one fix is to unmount the component and remount it after a set time, it's an ugly fix but it works for now, example:

const Video = ({ url }) => {
  const [load, setLoad] = useState(false)

  useEffect(() => {
    setTimeout(() => {
      setLoad(true)
    }, 500)

    return () => {
      setLoad(false)
    }
  }, [url])

  if (!load) {
    return <span>loading...</span>
  }

  return (
    // player here
  )
}

export default Video