HTML怎么用track元素加字幕？实用技巧分享-html教程-PHP中文网

track元素是WebVTT字幕文件的引用标签，必须作为video/audio子元素、双标签书写，且需正确设置kind、srclang、label及src属性；WebVTT文件须UTF-8无BOM编码，以WEBVTT开头，时间戳格式严格，段间空一行；动态控制需等待loadedmetadata事件。

html怎么用track元素加字幕？实用技巧分享

track 元素本身不存储字幕内容，它只是指向外部 WebVTT 文件的“路标”。直接往 track 标签里写文字没用，浏览器会忽略。

track 元素必须配合 video/audio 且放在其内部

常见错误是把 track 写在 video 外面，或者用自闭合写法（）——HTML 规范要求它必须是双标签，即使没内容也要写成，但更推荐显式写 src 和 kind 属性。

track 必须作为 video 或 audio 的子元素，位置在 source 之后、fallback 之前
kind="subtitles" 是最常用值；kind="captions" 适合含音效/说话人标识的场景；kind="descriptions" 用于视障辅助
srclang 必须设（如 srclang="zh"），否则 Chrome/Firefox 可能拒绝加载该轨道
label 值会显示在播放器的字幕菜单里，建议用可读名称，比如 label="中文（简体）"

WebVTT 文件格式不能有编码或语法错误

哪怕一个空格错位，整个字幕都会失效。浏览器不会报错，只是静默跳过 —— 这是最常被卡住的地方。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

文件必须以 WEBVTT 开头，独占一行，后面跟一个空行
时间戳格式严格： 00:00:01.234 --> 00:00:04.567，毫秒必须三位，不能少也不能多
每段字幕之间必须空一行，不能用或 \n\n\n
文件保存为 UTF-8 编码（无 BOM），BOM 会导致 Firefox 完全不解析
路径必须可访问：如果 video 在 /lesson/ 目录下，track src="subs/cn.vtt" 就要确保 /lesson/subs/cn.vtt 能被 HTTP 直接 GET 到

JavaScript 动态控制字幕开关要等 loadedmetadata

直接操作 track.mode 很容易失败，因为 DOM 加载快于媒体元数据加载完成。

不要在 DOMContentLoaded 里设 track.mode = "showing"，此时 track 可能还没和 media 元素绑定好
监听 video 的 loadedmetadata 事件后再操作，或用 setTimeout 延迟 100ms（不推荐）
track.mode 只有三个合法值："disabled"（默认）、"hidden"（加载但不显示）、"showing"（显示）
想默认开启某条轨道，除了设 mode，还得确保它在 video.textTracks 列表里存在且已加载 —— 可检查 track.readyState === 2