在 HTML5 track 元素中获取提示

Question

在测试 HTML5 track 元素时，提示为 null。 TextTrackList 和 track 元素似乎已加载。另外，我知道 VTT 文件无法在本地访问，我正在服务器上进行测试。任何人都可以帮忙吗？提前致谢。

这是我的 Javascript：

        var audioElement = document.querySelector("audio");
        var textTracks = audioElement.textTracks;
        var textTrack = textTracks[0];
        var ques = textTrack.cues;
        var que = ques[0];
        console.log(que);

这是 HTML：

        <audio src="Audio Files/Q_firefox.ogg" controls>
        <track src="cues.vtt"></track>
        </audio>

Answer 1

提示值会随着曲目的播放而变化，因此您需要在每次文本更改时监听值的变化并运行您的函数。根据您的问题尝试此示例：

var audioElement = document.querySelector("audio");
var textTrack = audioElement.textTracks[0];

// When cue value changes run your code
textTrack.oncuechange = function(e) {
  var cue = this.activeCues[0];
  if(cue){
    console.log(cue.text);
  }
}

<audio src="http://html5-demos.appspot.com/static/video/track/Google_Developer_Stories.webm" controls>
  <track src="http://html5-demos.appspot.com/static/video/track/video-subtitles-en.vtt" default>
</audio>

另外注意不需要关闭 HTML track 标签。