TextTrackList 是只读轨道容器,切换音轨需通过设置 TextTrack.mode 为 "showing"(启用)、"disabled"(禁用)或 "hidden"(预加载);应按 kind 类型分组管理,确保每种类型仅一条激活,并监听 addtrack/removetrack 更新 UI。
HTML5 的
本身不直接管理“切换逻辑”,它只是一个只读的轨道集合容器;真正的音轨(字幕/描述等)启用、禁用和优先级控制,由开发者通过操作单个
对象的
属性来实现。
TextTrackList 是只读的轨道列表
返回一个
对象,它类似数组,可通过索引访问轨道(如
),也支持
。但它没有
、
或
等方法——轨道由 HTML 的
标签或
方法注入,之后只能读取和监听变化。
切换音轨靠设置 TextTrack.mode
每条
有三个关键
值:
:轨道关闭,不显示也不触发事件(默认值)
:轨道加载但不渲染(可用于预加载或 JS 控制逻辑)
:轨道启用并实时渲染(唯一能显示内容的模式)
切换字幕时,只需将目标轨道设为
,其他同类型轨道(如所有
)设为
即可实现单选互斥。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
立即学习
“
前端免费学习笔记(深入)
”;
按 kind 类型分组管理更可靠
浏览器允许同一视频存在多个
不同的轨道(如
、
、
),但每种
通常只应激活一条。建议按类型筛选再操作:
监听变更与自动同步
支持
和
事件,适合动态加载字幕后更新 UI 列表;而单个
的
可响应时间轴提示(如字幕行更新),但不用于切换控制。注意:
变更不会触发
事件,需由业务逻辑保证状态一致。
TextTrackListTextTrackmodevideo.textTracksTextTrackListvideo.textTracks[0]getTrackById()add()remove()switchTo()addTextTrack()TextTrackmode"disabled""hidden""showing""showing"kind="subtitles""disabled"kindsubtitlescaptionsdescriptionskind
function showTrackByKind(video, kind, language) {
const tracks = Array.from(video.textTracks);
tracks.forEach(track => {
if (track.kind === kind) {
track.mode = (track.language === language) ? 'showing' : 'disabled';
}
});
}
// 示例:启用英文子标题
showTrackByKind(video, 'subtitles', 'en');
TextTrackListaddtrackremovetrackTextTrackoncuechangemodetexttrack