How to reload vtt subtitles tracks? #8773

elieobeid7 · 2024-06-18T16:17:31Z

elieobeid7
Jun 18, 2024

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?

Answered by elieobeid7

Jun 19, 2024

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: "sho…

View full answer

mister-ben · 2024-06-18T17:24:01Z

mister-ben
Jun 18, 2024
Maintainer

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.

0 replies

elieobeid7 · 2024-06-18T19:24:19Z

elieobeid7
Jun 18, 2024
Author

@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

0 replies

elieobeid7 · 2024-06-19T09:08:33Z

elieobeid7
Jun 19, 2024
Author

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
  );
};

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to reload vtt subtitles tracks? #8773

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to reload vtt subtitles tracks? #8773

elieobeid7 Jun 18, 2024

Replies: 3 comments

mister-ben Jun 18, 2024 Maintainer

elieobeid7 Jun 18, 2024 Author

elieobeid7 Jun 19, 2024 Author

elieobeid7
Jun 18, 2024

mister-ben
Jun 18, 2024
Maintainer

elieobeid7
Jun 18, 2024
Author

elieobeid7
Jun 19, 2024
Author