track标签必须嵌套在video或audio内才生效，kind值须为subtitles/captions/descriptions/chapters/metadata，srclang对字幕必需，default仅限字幕且唯一，vtt文件需以webvtt开头、正确时间格式及服务器部署。
track 标签必须嵌套在 video 或 audio 元素内才生效
直接写 <track></track> 但没包在 <video></video> 或 <audio></audio> 里，浏览器完全忽略它——连控制台都不会报错，字幕就是不显示。这是最常被卡住的地方。
正确结构示例：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" srclang="zh" label="中文" src="zh.vtt" default><track kind="subtitles" srclang="en" label="English" src="en.vtt"><track kind="chapters" srclang="" label="章节" src="chapters.vtt"></track></track></track></source></video>
-
kind必须是合法值：subtitles、captions、descriptions、chapters或metadata；填错（比如写成subtitle）会导致 track 被静默丢弃 -
srclang对subtitles和captions是必需的，否则多语言切换菜单里不会出现该条目；对chapters可留空或省略 -
default属性只能出现在一个<track></track>上，且仅对subtitles/captions有意义；chapters不响应default
WebVTT 文件路径必须可被浏览器直接 GET 到
本地双击 HTML 文件打开时，src="zh.vtt" 会触发 file:// 协议请求，而大多数浏览器出于安全限制，会直接拒绝加载 .vtt 文件——控制台报错 Failed to load resource: net::ERR_FILE_NOT_FOUND 或更隐蔽的 CORS 类错误。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 开发阶段务必用本地服务器启动，例如：
npx http-server或 VS Code 的 Live Server 插件 -
src值支持相对路径（如./subs/en.vtt）、绝对路径（/assets/subs/ja.vtt）和完整 URL，但不能是file:///开头的本地绝对路径 - VTT 文件首行必须是
WEBVTT（大小写敏感，后面可跟空格或注释），否则整个文件被当作无效内容丢弃
chapters 类型的 track 要求 VTT 时间戳与 media 元素同步
章节 track 不是单纯列表，而是时间轴映射：浏览器靠它在进度条上渲染章节标记，并在播放时自动更新标题栏（如 Chrome 地址栏显示当前章名）。如果时间戳错位，章节就“漂移”或根本不触发。
合法 chapters.vtt 示例：
WEBVTT 00:00:00.000 --> 00:01:23.500 片头 00:01:23.501 --> 00:05:17.200 第一幕：雨夜 00:05:17.201 --> 00:12:44.800 第二幕：旧信
- 每段必须有严格的时间范围（
-->两边各一个时间戳），且不能重叠、不能倒置 - 时间格式为
hh:mm:ss.mmm，小时可省略（如01:23.500），但推荐统一写全以避免解析歧义 - 章节文本不能含 HTML 标签，也不能换行；浏览器只取第一行非空白内容作为章节名
- 如果视频源本身有内嵌章节（如 MP4 的
chapbox），外部<track kind="chapters"></track>会优先使用，覆盖内嵌数据
多语言字幕切换依赖浏览器原生控件，无法用 JS 直接“选中”某条 track
你不能通过 document.querySelector('track[ srclang="ja"]').mode = 'showing' 这种方式强制激活某条字幕——mode 属性只读，手动赋值无效。用户必须通过右键视频 → “字幕”菜单，或点击播放器的字幕按钮手动选择。
- 唯一可控的初始状态是加
default属性（仅限subtitles/captions），但用户一旦手动切换过，浏览器就会记住上次选择，下次播放仍沿用 - 若需完全接管字幕逻辑（比如做自定义 UI、实时翻译），得放弃
<track></track>，改用<div> + JavaScript 解析 VTT + 手动渲染字幕层 <li> <code>kind="captions"和kind="subtitles"在多数浏览器中 UI 上无区别，但语义不同：前者面向听障用户（含音效描述），后者面向语言障碍用户（仅对话翻译）
实际部署时，最容易被忽略的是 VTT 文件的 MIME 类型。Nginx/Apache 若未配置
.vtt 对应 text/vtt，某些旧版浏览器（尤其是 Safari）会拒载 track。别只测 Chrome。
