Captions not working

[ghost]

I am using HLS.js to play videos and attaching plyr to the element of the HLS.js, which is working fine. But when I try to load captions from a different url, it doesn't work. (PS. I am using ReactJS)

Expected behaviour

Subtitles should load and work as expected

Actual behaviour

Subtitles don't load and word most of the time, but load very occasionally.

The code looks something like

if (Hls.isSupported() && streamUrl.includes("m3u8")) {
      const hls = new Hls({ enableWorker: true });

      hls.loadSource(streamUrl);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        const qualityLevels = hls.levels.map((level) => level.height).reverse();

        options.quality = {
          default: qualityLevels[0],
          options: qualityLevels,
          forced: true,

          onChange: (quality: number) => {
            const t = quality;
            hls.levels.forEach((e, n) => {
              if (e.height === t) {
                hls.currentLevel = n;
              }
            });
          },
        };
        plyr = new Plyr(element!, options);
      });

      hls.attachMedia(element!);

The options I am sending to plyr are

  {
      i18n: {
        play: "Play (K)",
        pause: "Pause (K)",
        mute: "Mute (M)",
        unmute: "Unmute (M)",
        enterFullscreen: "Enter fullscreen (F)",
        exitFullscreen: "Exit fullscreen (F)",
      },
      captions: { active: true, language: "en-us", update: true },
      autoplay: true,
      tooltips: { controls: true, seek: true },
      seekTime: 5,
      keyboard: { focused: true, global: true },
      fullscreen: { iosNative: false },
      speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] },
    }

This is how I am loading the subtitles

<video
        autoPlay
        playsInline
        controls
        crossOrigin="anonymous"
        style={{
          width: "100%",
          height: "100%",
          display: "block",
          objectFit: "contain",
        }}
      >
        <track
          kind="subtitles"
          label="English"
          src={enSubUrl}
          srcLang="en-us"
          default
        />
      </video>

[jackguoAtJogg]

This is a duplicate issue of #1959