以下是一个简单的例子，演示如何使用 TextTrack 对象来获取和操作文本轨道：
<!DOCTYPE html>
<html>
<head>
<title>TextTrack Object Example</title>
</head>
<body>
<video controls>
<source src="example.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="english-subtitles.vtt" default>
</video>
<br>
<button onclick="listTracks()">List Text Tracks</button>
<script>
// 获取文本轨道列表
function listTracks() {
var video = document.querySelector('video');
var textTracks = video.textTracks;
for (var i = 0; i < textTracks.length; i++) {
var track = textTracks[i];
console.log("Track " + (i + 1) + ":");
console.log(" Kind: " + track.kind);
console.log(" Label: " + track.label);
console.log(" Language: " + track.language);
console.log(" Mode: " + track.mode);
}
}
</script>
</body>
</html>
在这个例子中，<video> 元素包含一个 <track> 元素，该元素定义了一个英文的字幕轨道。通过 JavaScript，我们使用 document.querySelector('video') 获取视频元素，然后通过 textTracks 属性获取文本轨道列表。通过遍历这个列表，我们输出每个文本轨道的相关信息，包括 kind（类型）、label（标签）、language（语言）和 mode（模式）。
点击 "List Text Tracks" 按钮时，会在控制台中显示文本轨道的信息。这个例子中，我们只有一个英文的字幕轨道，但在实际应用中，你可能会有多个轨道，包括不同语言的字幕轨道。
转载请注明出处：http://www.pingtaimeng.com/article/detail/6238/JavaScript 和 HTML DOM