如何获取字幕当前显示的文本 [英] How to get subtitles' currently displayed text

问题描述

我想通过console.log在外部网站(如youtube.com)的暂停视频帧上提取字幕文本.

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

假定外部网站通过webvtt或类似文件提供字幕.

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

由于字幕文本可能是DOM的一部分，因此可以在浏览器的开发者控制台中使用JavaScript代码来提取文本&在检测到暂停时间后通过console.log()显示它吗?

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?

推荐答案

您可以访问视频的 .textTracks ，您可以从中访问其activeCues，从中可以获取其

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>

这篇关于如何获取字幕当前显示的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！