How to resolve the issue with JW player that keeps playing audio despite switching to another player

Recently we have introduced a live streaming feature in our application. For that, we have used a JW player as it is easy to show youtube videos first and then streaming live events. We have also implemented a feature for an alternate player option for the end-user if there is any streaming issue. For that, we have used Flow player as it is lightweight and powerful. So we have JW Player as the default player and Flow player as an alternative.

We have integrated the JW player library into our application from here and the flow player library from here.

Everything was working well except this one peculiar issue. The audio from the JW player was playing even after we switched to the Flow player. The root cause we found that the instance of the JW Player was still playing in the background even after switching to Flow Player. The solution we tried is to dispose of the JW Player, and cheers, it worked.

Here is the code snippet. You can write it in any framework or language to dispose of the player gracefully.

  let sub = isPlayerVisible.subscribe(v => {
    const player = jwplayer(elmId);
    if (!v) {
      try {
        if (player && player.remove) 
        {
          player.remove();
          sub.dispose();
        }
      }
      catch (e) {
        // console.log(e);
      }
    }
  });

In the above code, isPlayerVisible is a boolean field used for the JW Player's visibility.

Thank you for reading.