Programmatically assigning text track video captions from vtt file url

video-vtt-programmatic.js

const vttText = await fetch(vttUrl).then(res => res.text());

const timeCodeToSeconds = (str) => {
  const [h, m, s] = str.split(':').map(Number);
  return h * 60 * 60 + m * 60 + s;
};

// PS! simple TEST parser! vtt format could contain NOTES and css styling
// https://developer.mozilla.org/en-US/docs/Web/API/VTTCue
const cues = vttText
  .split(/^\d{1,}$/gm)
  .slice(1)
  .map((str) => str.trim())
  .map((str) => {
    const splitIndex = str.indexOf('\n');
    const [from, to] = str.substring(0, splitIndex).split(/\s[^\d]+/);
    const text = str.substring(splitIndex + 1);
    return [timeCodeToSeconds(from), timeCodeToSeconds(to), text];
  });

const track = video.addTextTrack('captions', 'Captions', 'no');
cues.forEach((args) => track.addCue(new VTTCue(...args)));
track.mode = 'showing';