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

How to get subtitles' currently displayed text

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

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

由于字幕文本可能是 DOM 的一部分,能否在浏览器的 Developer Console 中使用 JavaScript 代码来提取文本并在之后通过 console.log() 显示它检测它暂停的时间?

您可以访问视频的 .textTracks, from which you'll be able to access its activeCues from where you can get their text 值:

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>

如果你想在它播放的时候这样做,那么你可以监听 cuechange 事件:

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>