How to get subtitles' currently displayed text

Question

I would like to extract the subtitle text on a paused video frame of external website (like youtube.com) through console.log.

It is assumed that the external website provides the subtitles through a webvtt or similar file.

As the subtitle text is possibly part of the DOM, can JavaScript code be used in the browser's Developer Console to extract the text & display it through console.log() after detecting the time at which it was paused?

You need a webvtt parser and extract the text at the right time... — andriusain, Feb 14 '20 at 03:23
As the subtitle text is possibly part of the DOM, can JavaScript code be used in the browser's Developer Console to extract the text after detecting the time at which it was paused? Is there any way to invoke a webvtt parser through JS in the Console? — mvark, Feb 14 '20 at 03:32
"external website"? What does it mean? You are on /site-A.com/ and want to get the value at /site-B.com/? — Kaiido, Feb 14 '20 at 03:33
@Kaiido By external site, I meant site like youtube.com, not owned by me. I would like to extract subtitle text on a frame on which I've paused possibly through console.log — mvark, Feb 14 '20 at 03:37
Your question does not make sense. There is no such thing as `extract X through console.log`. Perhaps you meant to say `extract X, and then print it with console.log` — JK., Feb 14 '20 at 03:55
@JK, Yes. I edited the question to make it more specific with the feedback provided. Please let me know if any further clarification is required — mvark, Feb 14 '20 at 03:59
You shouldn't need any help figuring out how to print something with console.log. So really the question should have just been `How to extract X?` Don't include unnecessary questions. — JK., Feb 14 '20 at 04:04
@JK I mentioned console.log thinking it would help visualize the use case — mvark, Feb 14 '20 at 04:15

Kaiido · Accepted Answer · 2020-09-09T04:51:35.730

You can access the video's .textTracks, from which you'll be able to access its activeCues from where you can get their text value:

initTrack();
video.addEventListener('pause', e => {
 const track = [ ...video.textTracks ]
   .find( track => track.mode === "showing" );
 const texts = [...track.activeCues].map( cue => cue.text );
 console.log( texts.join('\n') );
});


// just to make a VTT accessible in Snippet
function initTrack() {
  const track = document.querySelector("track");
  let vttText = `WEBVTT`;
  for( let i=0; i<35; i++ ) {
    const t1 = (i + '').padStart(2 , '0');
    const t2 = ((i+1) + '').padStart(2 , '0');
    vttText += `
      00:00:${t1}.000 --> 00:00:${t2}.000
      Test${i}`
  }
  const vttBlob = new Blob([vttText], {
    type: 'text/plain'
  });
  track.src = URL.createObjectURL(vttBlob);
}

video { max-height: 150px;  }
::cue { font-size: 30px }

<div>
  <video id="video" controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm">
    <track default kind="captions" label="English" srclang="en"/>
  </video>
</div>

And if you wish to do it while it's playing, then you can listen for the cuechange event:

initTrack();
video.addEventListener("loadedmetadata", (evt) => {
  const track = [...video.textTracks]
    .find(track => track.mode === "showing");
  track.oncuechange = (evt) => {
    const texts = [...track.activeCues].map(cue => cue.text);
    console.log(texts.join("\n"));
  };
});

// just to make a VTT accessible in Snippet
function initTrack() {
  const track = document.querySelector("track");
  let vttText = `WEBVTT`;
  for (let i = 0; i < 35; i++) {
    const t1 = (i + '').padStart(2, '0');
    const t2 = ((i + 1) + '').padStart(2, '0');
    vttText += `
      00:00:${t1}.000 --> 00:00:${t2}.000
      Test${i}`
  }
  const vttBlob = new Blob([vttText], {
    type: 'text/plain'
  });
  track.src = URL.createObjectURL(vttBlob);
}

video {
  max-height: 150px;
}

::cue {
  font-size: 30px
}

<div>
  <video id="video" controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm">
    <track default kind="captions" label="English" srclang="en"/>
  </video>
</div>

How to get subtitles' currently displayed text

1 Answers1