Wie würde ich Untertitel aus einem Video erkennen und sie in einen Textbereich kopieren?

Question

Also im Erstellen einer Chrome-Erweiterung, die die Untertitel aus einem Video, und kopiert sie in einen Textbereich, im Moment kann ich erkennen, ob es gibt ein Video, das auf der Webseite abgespielt wird, und wenn es eine Wiedergabe gibt, möchte ich, dass die Untertitel oder die gesprochenen Wörter aus dem Video in den Textbereich der Erweiterung kopiert werden. Hier ist der Code in 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 

} 

Ich habe auch den Textbereich bekommt, dass die Untertitel in kopiert werden, hier ist, dass Code in html

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

So mag ich die suptitles kopieren von lets Sagen Sie ein Youtube-Video, das würde dann in den Textbereich gebracht und dort angezeigt werden. Wenn mir jemand helfen könnte, wäre das großartig, danke

Answer 1

Sie werden wahrscheinlich die "textTracks" -Eigenschaft des HTML5Elements benötigen.

videoEl.textTracks wird eine TextTrackList aller enthaltenen Tracks (Untertitel/Untertitel) zurückgeben. Sie können die Länge der TextTrackList überprüfen, ob es irgendwelche Spuren und Schleife durch alle von ihnen gibt, bis Sie die mit der Eigenschaft language finden, die dem entspricht, wonach Sie suchen (Beispiel: "en-US"). Sie sollten auch die kind Eigenschaft überprüfen, um sicherzustellen, dass es "subtitles" oder "caption" ist.

Für mein Beispiel werde ich nur die 0-Index Texttrack verwenden (die erste in der Liste):

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'); 

Erläuterung:

Wir bekommen die TextTrackList vom <video> Element . Wir wählen die erste verfügbare TextTrack und erhalten die CueList mit .cues. Wir durchlaufen dann alle "Cues" (Textfolien) in der CueList und fügen den Text für sie an ein Array an. Nachdem wir den gesamten Text erhalten haben, fügen wir ihn dem Element <textarea> hinzu, wobei jeder Eintrag durch einen Zeilenumbruch getrennt ist.

Das hat sehr wenig Dokumentation und es ist schwer, eine funktionierende Demo zu erstellen, da ich eine Untertiteldatei in der gleichen Ursprungsdomäne wie jsfiddle/codepen/"stack snippet" benötigen würde, aber ich habe es im Konsolenfenster getestet einige Websites, die Untertitel HTML5 Videos enthalten und es scheint zu funktionieren (zumindest in Chrome). Es sollte so weit zurück wie IE10 unterstützen.

Referenz: http://www.w3schools.com/tags/av_prop_texttracks.asp