How to reload vtt subtitles tracks?

[elieobeid7]

I generate the videojs html5 video player with default vtt tracks, the editor edits them manually and clicks save, now you have new vtt file, that has the exact file name and path of the old file, it's just that videojs keeps reading the old file. The vtt file is hosted on the server.

<video id="player">  
     <source type="video/mp4" src="/my_video_file.mp4">   
     <track src="/captions_file.vtt" label="English" kind="captions" srclang="en" default>
</video>

if I do player.reset(), it messes up the player, I can't even override the current player, if I do player.dispose() the entire div is deleted. What to do in this case?

[mister-ben]

You can use removeRemoteTextTrack() and addRemoteTextTrack(), but if it's the same URL, the browser or a will probably cache it. Adding some cache buster param ?rand=458376 to your vtt's URL might be enough.

[elieobeid7]

@mister-ben I tried that as well, didn't work, the player kept playing fine, the tracks were removed but I don't see the new tracks after adding them

const switchTracks = (vttFile, api_key, lang_code, language) => {
  // generate random number to avoid caching
  const random = Math.floor(Math.random() * 1000000);

  // remove all existing tracks
  console.log("removing vtt:", vttFile);
  let tracks = player.remoteTextTracks();
  let numTracks = tracks.length;
  for (let i = numTracks - 1; i >= 0; i--) {
    player.removeRemoteTextTrack(tracks[i]);
  }

  console.log("adding vtt:", vttFile);
  player.addRemoteTextTrack(
    {
      src: `${vttFile}?api_key=${api_key}&random=${random}`,
      kind: "subtitles",
      srclang: lang_code,
      label: language,
    },
    false
  );
};

Should I reload the player somehow or do something else? I get no javascript or python errors, I know the function is working fine, I don't know why the subtitles aren't showing

[elieobeid7]

I had to add mode: "showing", thank you so much for your help.

const switchTracks = (vttFile, api_key, lang_code, language) => {
  // generate random number to avoid caching
  const random = Math.floor(Math.random() * 1000000);

  // remove all existing tracks
  console.log("removing vtt:", vttFile);
  let tracks = player.remoteTextTracks();
  let numTracks = tracks.length;
  for (let i = numTracks - 1; i >= 0; i--) {
    player.removeRemoteTextTrack(tracks[i]);
  }

  console.log("adding vtt:", vttFile);
  player.addRemoteTextTrack(
    {
      src: `${vttFile}?api_key=${api_key}&random=${random}`,
      kind: "subtitles",
      srclang: lang_code,
      label: language,
      mode: "showing",
    },
    false
  );
};