Arbeiten mit <video> und <track>

Question

Wie mit <track> in Video zu arbeiten? Ich möchte ein Wort vom Track-Text erhalten, wenn ich mit der Maus auf dieses Wort klicke.

var track = document.getElementById('ger').track; 
 
var cues = track.cues; 
 
var active_cues = track.activeCues; 
 
var text = active_cues[0].text; 
 
console.log(text);

<video id="video" width="320" height="240" controls> 
 
    <source src="Video/video.mp4" type='video/mp4'> 
 
    <track id="ger" kind="subtitles" src="Video/Twitter_in_Plain_English_ger.vtt" srclang="de"> 
 
</video>

Answer 1

Basierend auf der Dokumentation zu Spuren Ich denke, was Sie so etwas wie dies aussehen würde wollen:

var videoElement = document.querySelector("video");//get video element where you want tracks 
var track = videoElement.textTracks[0]; //get first track element that contains cues 
var activeCue = track.activeCues[0]; //get first active cue 
var cueText = activeCue.text; // get the text of active cue 
console.log(cueText); display text in dev console 

Auch hier ist ein schönes komplettes Tutorial zur Verwendung von Tracks: https://www.html5rocks.com/en/tutorials/track/basics/