HTML代码里track元素应该放哪里？标签嵌套规则-html教程-PHP中文网

必须是的直接子元素且严格位于所有之后、之前；缺一不可的属性为kind、srclang、label；WebVTT文件需首行WEBVTT、UTF-8无BOM、服务端返回text/vtt MIME类型。

html代码里track元素应该放哪里？标签嵌套规则

track 必须是 video 的直接子元素，且位置严格限定在所有 source 之后

浏览器只在开始标签之后、所有元素闭合之后、之前这个狭窄区间内解析。放错位置等于没写——不会报错，也不会发起请求，video.textTracks.length 恒为 0。

常见错误现象包括：

写在前面 → 被静默忽略
套在 或其他容器里 → 不触发加载
放在外面 → 完全不被识别



 夹在两个  中间 → 只有第一个  后的轨道可能生效（行为不可靠）
多个 track 并列时顺序不影响功能，但影响 default 逻辑
多个  可以并排写，浏览器会全部加载并注册进 video.textTracks 列表。但「默认启用哪个」由 default 属性决定，且只认第一个带 default 的元素。
使用场景和注意事项：

如果没加 default，所有轨道初始状态都是 disabled，用户需手动打开字幕菜单选择
写了多个 default，只有第一个生效，后续的会被忽略
顺序本身不影响语言切换或 JS 控制能力，但会影响 DOM 遍历时的索引顺序（如 video.textTracks[0] 指向谁）
不要用 JS 动态插入  到已渲染的  内部——必须随 HTML 一起加载，否则无效

track 不能嵌套、不能包裹内容、不能省略必需属性
 是自闭合标签，没有结束标签，也不允许包含子节点。它只靠属性声明行为，漏掉关键属性就静默失效。
必需属性组合（缺一不可）：

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										


kind="subtitles"（或其他合法值：captions / chapters / descriptions / metadata）

src 指向有效的 WebVTT 文件 URL（注意跨域限制）

srclang —— 当 kind="subtitles" 时强制要求，必须是标准 BCP 47 语言标签（如 zh、en-US、zh-Latn），不能写 pinyin 或 zh-py


label —— 用户在字幕菜单中看到的名称，建议含括号说明变体（如 中文(简体)）

错误示例：（缺 srclang 和 label）→ 浏览器不加载，控制台无提示。
WebVTT 文件本身也得过三关：编码、格式、响应头
 标签只是入口，真正让字幕显示出来，还得靠后端和文件本身配合。三者任一失败，都表现为「字幕菜单里看不到该语言」或「点了没反应」。
必须检查：

VTT 文件首行必须是纯文本 WEBVTT（不区分大小写，前后无空格，无 BOM）
文件保存为 UTF-8 无 BOM 编码；含中文/日文等字符时，BOM 会导致解析失败
服务端返回的 MIME 类型必须是 text/vtt（不是 text/plain 或 application/octet-stream）
若 src 是跨域地址，服务端必须返回 Access-Control-Allow-Origin 头，否则 JS 无法读取内容，部分浏览器连字幕菜单都不显示该轨道

最容易被忽略的是服务端响应头和 BOM —— 这两者不出错不报警，但字幕就是不出现。