Question

在测试HTML5轨道元素时，提示出现空值。 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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

另请注意，无需关闭HTML跟踪代码。

在HTML5轨道元素中获取提示

1 个答案: