HTML DOM Track 对象

HTML DOM Track 对象

HTML DOM Track 对象表示 WebVTT 轨道中的文本或其他内容。使用 Track 对象，您可以访问和操作 WebVTT 轨道中的文本。

创建 Track 对象

要创建 Track 对象，请使用 document.createElement()方法和 track 元素的它们的属性来指定 WebVTT 轨道的标签。例如，下面的代码将创建一个名为 myTrack 的新跟踪对象：

var myTrack = document.createElement("track");
myTrack.kind = "captions";
myTrack.label = "English Subtitles";
myTrack.srclang = "en";
myTrack.src = "subtitles_en.vtt";

访问 Track 对象的属性

通过访问 Track 对象的属性，您可以获取和设置 WebVTT 轨道中的文本。 下面是一些可用属性：

1. kind - 轨道的类型，可以是 subtitles、captions、descriptions、chapters 或 metadata。
2. label - 标签显示在用户界面上，通常用于指定轨道语言。
3. srclang - 标记也用于目的，以通知使用哪种语言的 WebVTT 文件。如果这个属性没有设置，那么它使用了基于浏览器的语言设置。
4. src - WebVTT 文件的 URL。
5. default - true 表示轨道是默认的轨道。

以下是一个示例代码，用于获取并设置 Track 对象的属性：

//获取属性
var kind = myTrack.kind;
var label = myTrack.label;
var srclang = myTrack.srclang;
var src = myTrack.src;
var def = myTrack.default;

//设置属性
myTrack.kind = "captions";
myTrack.label = "English Subtitles";
myTrack.srclang = "en";
myTrack.src = "subtitles_en.vtt";
myTrack.default = true;

添加和删除 Track 对象

要向 WebVTT 轨道中添加文本，使用 track 元素的 AddCue()方法。接受一个行内时间表，其文本内容指定为 WebVTT 规范。 AddCue()方法的结果是一个新的 TextTrackCue 对象。

例如，下面的代码将向 myTrack 关联的 WebVTT 文件中添加一个新的文本块：

myTrack.addCue(new TextTrackCue("00:20.000", "00:24.000", "Hello!"));

要从轨道中删除文本，使用 removeCue()方法。您必须传递要删除的 TextTrackCue 对象的引用。

例如，下面的代码将从 myTrack 关联的 WebVTT 文件中删除第一个文本块：

myTrack.removeCue(myTrack.cues[0]);

总结

Track 对象是表示 WebVTT 轨道的重要成分，使您能够访问和操作 WebVTT 轨道中的文本。这些对象具有许多属性，可以获取和设置。此外，您可以使用 addCue()和 removeCue()方法来添加和删除 TextTrackCue 对象。这使得在 HTML 和 JavaScript 中处理字幕文本变得非常容易。