Dynamically Setting VTT Content for <track> Element in Vidstack Player

[zellmccloud]

I'm currently integrating Vidstack as a video player into my project and I'm exploring the feasibility of programmatically setting VTT content for a element. While I've successfully employed full VTT files for closed captions, I'm now faced with the challenge of creating clips from the same video without generating numerous chapter files.

In essence, my goal is to utilize the complete video but dynamically populate the chapters section with only relevant information for each clip. Ideally, I'd like to set up a scenario where the player starts at the timestamp of the named chapter for each clip.

Here's a simplified concept of what I'm envisioning:

const generatedVTTContent = `
WEBVTT

00:00:00.000 --> 00:00:35.300

00:00:35.300 --> 00:00:44.700
Clip Name

00:00:44.700 --> 00:00:49.000
`; <!-- Final form of programmatically generated data -->


<media-player>
  <media-outlet>
    <!-- ... (other tracks) -->
    <track
      content="${generatedVTTContent}" <!-- Set the content using programmatically generated data -->
      srclang="en-US"
      kind="chapters"
      default
      data-type="vtt"
    />
  </media-outlet>
  <!-- ... (other elements) -->
</media-player>

Currently, I'm encountering an error when attempting to implement this concept. I'm wondering if there's a recommended approach to achieve this dynamic chapter setup within Vidstack or if anyone has successfully tackled a similar scenario before.

aforementioned error:

 var ParseErrorBuilder = {
  _badVTTHeader() {
    return new ParseError({
      code: ParseErrorCode.BadSignature,
      reason: "missing WEBVTT file header",
      line: 1
    });
  }

[noah1234j]

I am in the same boat. There should be a way to push chapters without having to have a vtt file

[noah1234j]

I actually found the answer in someone elses post on here.

const playerRef = ref();
onMounted(() => {

const track = new TextTrack({
kind: 'chapters',
type: 'vtt',
default: true
});
track.mode = 'showing';

track.addCue(new VTTCue(0, 50, 'My first chapter'));
track.addCue(new VTTCue(51, 500, 'My second chapter'));
playerRef.value?.textTracks.add(track);
});