javascript - 我如何从视频中检测字幕并将其复制到文本区域

Question

所以我创建了一个 Chrome 扩展程序，它从视频中获取字幕，并将其复制到文本区域中，此时我可以检测网页上是否正在播放视频，如果正在播放，我想要将视频中的字幕或台词复制到扩展程序的文本区域中。这是 JavaScript 代码

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

if(document.querySelector('video').playing){ 

    //copy the subtitles into a new variable

}

我还得到了字幕将被复制到的文本区域，这是 html 中的代码

<textarea rows = "10" cols = "80" id = "text"></textarea>    
    <br> 

所以我想从 YouTube 视频中复制字幕，然后将其复制到文本区域并显示在那里。如果有人能帮助我那就太好了，谢谢

Answer 1

您可能需要使用 HTML5 <video> 的“textTracks”属性元素。

videoEl.textTracks将返回所有包含的轨道(字幕/字幕)的 TextTrackList。您可以检查 TextTrackList 的长度，看看是否有任何轨道，然后循环遍历所有轨道，直到找到带有 language 的轨道。与您要查找的内容匹配的属性(例如:“en-US”)。您可能还应该检查 kind属性以确保它是 "subtitles"或"caption" .

对于我的示例，我将使用 0 索引 textTrack(列表中的第一个):

var allText = [];
var trackCues = document.querySelector('video').textTracks[0].cues;
var i;

for (i = 0; i < trackCues.length; i += 1) {
  allText.push(trackCues[i].text);
}

document.getElementById('text').innerText = allText.join('\n');

说明:

我们从<video>获取TextTrackList元素。我们选择第一个可用的 TextTrack 并使用 .cues 获取 CueList 。然后，我们遍历 CueList 中的所有“提示”(文本幻灯片)并将它们的文本附加到数组中。获取所有文本后，我们将其添加到 <textarea>每个条目由换行符分隔的元素。

这有很少的文档，很难构建一个工作演示，因为我需要一个与 jsfiddle/codepen/"stack snippet"托管在同一源域上的字幕文件，但我在一些控制台窗口中测试了它包含带字幕的 html5 视频的网站，它似乎可以工作(至少在 Chrome 上)。它应该支持早至 IE10。

引用:http://www.w3schools.com/tags/av_prop_texttracks.asp