在 HTML5 track 元素中获取提示

Posted 2023-05-08

【中文标题】在 HTML5 track 元素中获取提示

【英文标题】：Get cue in HTML5 track element

【发布时间】：2013-01-01 20:38:36

【问题描述】：

在测试 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>

【问题讨论】：

以防万一您尝试使用 firefox.... 您知道目前 firefox 不支持 track 元素吗？

感谢您的回复。我也在 Chrome 中进行了测试，结果相同。

我无法让音频播放器显示文本（Linux 上的 Chrome 浏览器）。但是，如果您将 ogg 文件放在 <video> 标签而不是 <audio> 标签中，它确实有效。所以，似乎至少我的音频播放器目前不支持字幕/字幕等。

【参考方案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 标签。

【讨论】：

谢谢！这节省了我很多时间......知道如何在播放音频之前获得整个字幕吗？我需要在播放音频时突出显示当前的字幕。