HTML 音频视频 DOM addTextTrack() 方法

简介

addTextTrack() 方法是 HTML 音频视频 DOM 中用于向媒体元素添加字幕或标题轨道的方法。它返回一个 TextTrack 对象，该对象可以被添加到媒体元素的 textTracks 列表中。通过此方法，我们可以在播放媒体时添加各种语言的字幕或标题，使得视频内容更加易于理解和接受。

用法

const videoElement = document.querySelector('video');

// 创建 TextTrack 对象并添加到媒体元素中
const track = videoElement.addTextTrack('subtitles', 'English', 'en');
track.mode = 'showing';

// 添加字幕
track.addCue(new VTTCue(0.0, 5.0, 'Hello World!'));
track.addCue(new VTTCue(5.0, 10.0, 'Welcome to our tutorial!'));

在上面的示例中，我们首先获取了页面上的 video 元素。接着，我们使用 addTextTrack() 方法创建了一个名为 English 的字幕轨道，并将它添加到 video 元素中的 textTracks 列表中。我们还将这个轨道的显示模式设置为 showing，这表示轨道中的字幕将默认显示在视频上。

最后，我们使用 addCue() 方法向这个字幕轨道中添加了两个字幕文本，分别在第 0 秒到第 5 秒和第 5 秒到第 10 秒进行展示。

参数

addTextTrack() 方法有三个必选参数和两个可选参数：

• kind：表示要添加的轨道类型，可以是 subtitles（字幕）或 captions（标题）。
• label：表示添加的轨道的标签，用于在用户界面上展示。
• language：表示添加的轨道的语言。
• id：可选参数，表示添加的轨道的 ID。
• options：可选参数，表示添加的轨道的一些属性值，比如默认显示模式等等。

返回值

addTextTrack() 方法返回一个 TextTrack 对象，表示窗口中的文本轨道。此对象包含多个属性，例如 kind、label、srclang 和 mode。也可以使用 id 属性来标识轨道，以便在应用中引用它们。

总结

通过使用 addTextTrack() 方法，我们可以向 HTML 音频和视频元素添加字幕和标题，这些字幕和标题可以提高视频的易于理解性，更好地呈现视频内容。此外，addTextTrack() 方法返回的 TextTrack 对象也提供了轨道的控制和管理能力，使得我们可以更好地掌控媒体播放的情况。