Play two or more videos in the same page, I have this Error appendBuffer

[netodev13]

Hi I'm tryng to play some videos, but I have this Console Error:
[MSEController] > Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

I am using react player to play two videos in the same page through a url that I get from a fetch and then from a useEffect and a usestate variable send the value of the url to the component, however there are cases where when rendering the component, I get the error mentioned above and it remains infinite in the console.

The error is MediaError, in OnError event.

What I have been trying is to handle the error and to avoid that it continues showing in the console.

the VideoUrl state variable is the one I use to store the list of url for the videos

thank you in advance and if you need more info to find the solution I will be attentive.

[luwes]

could you provide a codesandbox online? that will be easier to debug. thanks!

[netodev13]

Hi, thanks for replying, sorry for the delay, I was testing.
Here I send you the link to the test of my code, for politics of my company I can't send the API I'm using.

Now the code is testing with a video previously uploaded to the project, however the problem that arises is when I get the URL of an API, since the video is a stream of a camera and when assigning it to the reactPlayer component is when it generates the error.
https://codesandbox.io/embed/hungry-maxwell-ss84w3?fontsize=14&hidenavigation=1&theme=dark