I'm facing a problem, I need to change the subtitles track source dynamically from javascript.

The current behaviour is that no change happens and the old subtitles keeps showing.

This is the html:

<video style="width: 50%;" class="m-5" id="vid" controls>
      <track src="oldPath.vtt" id="subtitleTrack" label="English" kind="subtitles" srclang="en" default />
</video>

This is the Javascript:

let subtitleTrack = document.getElementById("subtitleTrack");

function subtitleEdited(newTrackPath) {
  //....
  subtitleTrack.src = newTrackPath;
  //....
}

I need once the track source changed, the new captions should be loaded to the video directly.

I tried loading the video again and it didn't work by adding video.load() after changing the track source.

---

Update

After further investigation the problem seems to be because of caching issues. I need the new path to be the same old path (the path has new updates localy) But the browser takes his copy from the cache without updating it from the local files. __

Second Update

Thanks for the response of @Terry.

I tried adding versioning to the source, but it retrieves nothing.

Check the response size, The ?v=2 response it empty.

P.S. The project is electron project.Anyways, I don't think that it can be part of the problem.

I miss understood the problem.

the problem was I was trying to access the subtitle file while other function was editing it. So I added a callback to prevent that.

And also by applying @Terry's answer to add that cache-busting query.

It is working now after applying the above changes.