如何获取字幕当前显示的文字
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>
我想通过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>