Even if you destroy mpegtsPlayer, Detached HTMLVideoElement will still remain in the browser.

[omega0928]

I'm working on a React project to create a dashboard that switches between two screens once every 5 seconds. One screen is comprised of two mpegtsPlayer (mpegtsPlayer1, mpegtsPlayer2) to show two difference video sources and the other screen is comprised of other vector graphics (no mgpegtsPlayer).

I have configured so that when the switch occurs, the two players get destroyed and created again once the screen is switched back - to reduce network usage. (see below for destroying the object)

When doing so, I find that number of ‘Detached HTMLVideoElement’ AND ‘MediaSource’ doubles every time the screen is switched. Please see the below.

(2 Detached HTMLVideoElement and MediaSource when first rendered)

(4 Detached HTMLVideoElements and MediaSource when rendered the second time)

(6 Detached HTMLVideoElement and MediaSource when rendered for the third time)

This results in performance slow down as you can see that Nodes and Listeners increase in steps.

Can you help me in this regard?