Resumen

Tengo una lista de reproducción de videos que estoy viendo. Estoy cambiando la fuente de video al final de cada video. Por lo tanto, solo hay un elemento de video en todo momento. Sin embargo, Chrome parece mantener activo el reproductor web a pesar de que React apaga el video y cambia el elemento en el DOM. El problema con el que me encuentro es que Chrome parece mantener el reproductor web disponible después de que finaliza el video. A partir de Chrome v92, Chrome no le permitirá crear un nuevo video cuando haya demasiados abiertos, incluso si los videos han finalizado. Entonces, si esta lista de reproducción está en bucle todo el día, excede fácilmente la cantidad que permite Chrome. Entonces Chrome deshabilita el video y me da este error:

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

Mi fuente se parece un poco a esto:

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

Luego cambio la fuente de video en cada video nuevo. Esta captura de pantalla muestra cómo se ven los jugadores en Chrome:

Todos los videos continúan existiendo a pesar de que todos terminaron. React no parece manejar automáticamente la eliminación del video WebMediaPlayer, aunque solo estoy reutilizando el mismo elemento de video.

Intenté eliminar la fuente al final del video y volver a cargar como sugieren muchos sitios. Sin embargo, esto elimina la fuente del elemento de video y detiene la reproducción del video por completo.

¿Alguien sabe cuál es la mejor práctica para reutilizar un elemento de video con ReactJS que permitirá que WebMediaPlayer se elimine correctamente en la recolección de basura?