Summary

I have a playlist of videos that I'm looping through. I'm switching out the video source at the end of each video. So, there is only one video element at all times. However, Chrome seems to keep the web player active even though React switches out the video and changes the element on the DOM. The issue that I'm running into is that Chrome seems to keep the web player available after the video has ended. As of Chrome v92, Chrome will not allow you to create a new video when too many are open, even if the videos have ended. So, if this playlist is looping all day, it easily exceeds the amount that Chrome allows. Then Chrome disables the video and gives me this error:

Blocked attempt to create a WebMediaPlayer as there are too many WebMediaPlayers already in existence

My source looks a little like this:

const VideoPlayer = ({videoSource}) => {
  const videoRef = useRef(null);
  
  return (
    <video
      ref={videoRef}
      className="video-player"
      src={videoSource}
      autoPlay
    />;
  )
}

Then I switch out the video source on each new video. This screenshot is what the players look like in Chrome:

All of the videos continue to exist even though they are all ended. React doesn't seem to automatically handle the disposing of the video WebMediaPlayer, even though I'm just reusing the same video element.

I've tried removing the source at the end of the video and reloading like many sites suggest. However, this removes the source for the video element and stops the video from playing altogether.

Does anyone know the best practice for reusing a video element with ReactJS that will allow the WebMediaPlayer to be correctly disposed of in garbage collection?