怎么在HTML文件里规范组织track元素的结构层级-html教程-PHP中文网

track必须是video的直接子元素且紧接source之后，kind、srclang、label三属性缺一不可，WebVTT文件须首行WEBVTT、UTF-8无BOM、时间戳毫秒三位、服务端返回text/vtt MIME类型。

怎么在html文件里规范组织track元素的结构层级

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

浏览器只在内部、所有闭合之后、之前这个“窄缝”里解析。写错位置等于没写——控制台不报错，字幕菜单直接为空。

✅ 正确顺序：
❌ 错误示例：放在前面、包在里、中间插注释或空行、写在外
多个可并列，但顺序只影响默认启用逻辑（第一个带default的优先）


kind、srclang、label三个属性缺一不可，且值必须合法
这三个不是“建议填”，是浏览器注册轨道的硬门槛。少一个或写错，轨道直接被忽略。


kind必须是"subtitles"（不能是"subtitle"或"captions"，后者语义不同）

srclang必须用标准BCP 47码，如"zh-Hans"、"en-US"；"ch"、"cn"、"chinese"全无效

label是播放器菜单中显示的名称，必须有值（如"中文(简体)"），不能留空或仅空格

WebVTT文件格式零容错，首行和时间戳稍错即静默失败
浏览器对.vtt文件极其敏感，一个空格、一个字符错误就会整条轨道丢弃，且通常只报Failed to load resource，不提示具体原因。

											
												
												
													htmlppt.skill
													把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
												
												下载
												
											
										

首行必须顶格、全大写、无空格、无缩进、无BOM：WEBVTT（写成webvtt或前面有空格都失败）
时间戳强制格式：00:00:01.234 --> 00:00:04.567，毫秒三位，箭头前后各一个空格，小时位不能省略
编码必须是UTF-8无BOM：Windows记事本默认带BOM，务必用VS Code等工具保存为“UTF-8”（非“UTF-8 with BOM”）

src路径和服务器响应必须同时达标
能加载不代表能渲染。路径正确只是第一步，服务端响应头也得配合。


src需同源，或服务器明确开启CORS（Access-Control-Allow-Origin: *）
服务器必须返回Content-Type: text/vtt；返回text/plain或application/octet-stream会被浏览器拒绝解析
本地双击HTML测试时，file://协议下多数浏览器会因CORS策略阻断.vtt加载，务必走本地服务器（如python3 -m http.server）



实际调试时最容易卡在「结构看似对了，但字幕菜单就是空」——往往是因为srclang写成了"zh"而没加-Hans，或者.vtt文件用记事本保存带了BOM。这些点不显眼，却直接决定整个功能是否成立。