0

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. Network Screenshot

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

Raamyy
  • 560
  • 1
  • 6
  • 15
  • If you look at the `textTracks` property on the video and look at the `mode` property on the `TextTrack` object. Is that `mode` property set to `"showing"`? – Emiel Zuurbier Apr 11 '20 at 10:02
  • @EmielZuurbier I set it to showing manually by choosing it from the list. – Raamyy Apr 11 '20 at 10:16
  • And does that change anything for your problem? – Emiel Zuurbier Apr 11 '20 at 10:46
  • @EmielZuurbier No it didn't. I can see a part of the problem now. I need the subtitles to be updated from the same file. i.e. the new track path is the same as old track path, But the values inside are changed. The video player don't show these changes and renders the old data. Is there a way to re load the track element? Thanks ! – Raamyy Apr 11 '20 at 11:06

2 Answers2

1

As you have mentioned in your comments (and your updated question), that you are using the exact same track path. That will cause the browser to fetch from the cache instead since the file path has not changed: a good idea will be to simply add a cache-busting query string to the src attribute, so that the browser will ignore the cache:

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

function subtitleEdited(newTrackPath) {
  //....
  subtitleTrack.src = newTrackPath + '?t=' + new Date().getTime();
  //....
}

Of course if you're more comfortable with using template literals, this might be more readalbe:

subtitleTrack.src = `${newTrackPath}?t=${new Date().getTime()}`;
Terry
  • 63,248
  • 15
  • 96
  • 118
1

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.

Raamyy
  • 560
  • 1
  • 6
  • 15