Is it possible to add captions dynamically?

[mvsoom]

I am experimenting with realtime generated transcriptions that I would like to pop in via closed captioning.
Tried some stuff but nothing worked.
Is it possible to add captions during playback? Ideally word for word.

Cheers!

[ronalduQualabs]

@mvsoom Thanks for the report! Yes you can dynamically add captions if you have timing data using a TextTrack API. For example:

const video = document.getElementById('my-video');
const captions = video.addTextTrack('captions', 'Live Captions', 'en');
captions.mode = 'showing';

// Your generated text data, can be another format the importante is the duration, text and start time
const captionData = [
  { start: 0, duration: 1, text: 'Hello there!' },
  { start: 1, duration: 1.5, text: 'This is a live caption test.' },
  { start: 3, duration: 1, text: 'It works with custom timing.' },
];

captionData.forEach(item => {
  captions.addCue(new VTTCue(item.start, item.start + item.duration, item.text));
});

This will display captions at the specified times, and you can call it anytime, even while the video is playing.

You should also add the media controls for disable and visualize the current captions options

    <media-captions-menu anchor='auto' hidden>
      <div slot="title">Captions</div>
    </media-captions-menu>
...
   <media-captions-menu-button></media-captions-menu-button>

Note: Remember importing menu module import "media-chrome/menu"; or https://cdn.jsdelivr.net/npm/media-chrome@4/dist/menu/+esm

Let me know if this work for you.

[ronalduQualabs]

@mvsoom Hello could you try that code?