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

您可能需要使用＆＃34; textTracks＆＃34; HTML5 <video>元素的属性。

videoEl.textTracks将返回所有包含曲目（字幕/字幕）的 TextTrackList 。您可以检查 TextTrackList 的长度，看看是否有任何曲目并循环遍历所有曲目，直到找到language属性与您要查找的属性相匹配的曲目（例如：＆＃34; EN-US＆＃34;）。您还应该检查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 。然后我们遍历所有＆＃34; cues＆＃34; （文本幻灯片）在 CueList 中，并将它们的文本附加到数组中。在我们获得所有文本后，我们将其添加到<textarea>元素，每个条目用换行符分隔。

这个文档非常少，很难构建一个可用的演示，因为我需要一个与jsfiddle / codepen /＆＃34;堆栈片段＃34;相同的源域上托管的字幕文件。但是我在一些包含字幕html5视频的网站的控制台窗口中对它进行了测试，它似乎有效（至少在Chrome上）。它应该支持IE10。

参考：http://www.w3schools.com/tags/av_prop_texttracks.asp

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

1 个答案: