如何获取字幕当前显示的文本

问题描述

我想通过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，从中可以获取其 text 值:

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>

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