必须嵌在内且紧贴之后，缺一不可；kind、srclang、label、src四属性齐全，VTT文件须UTF-8无BOM、首行WEBVTT顶格、服务端配CORS与text/vtt MIME类型。

track 必须嵌在 video 内部且紧贴 source 之后

浏览器只认 元素内部、所有 标签闭合之后的 。放错位置会静默失效——控制台不报错，字幕菜单里直接不出现。

常见错误包括： 写在 前面、写在 外、中间夹了注释或 div。正确结构只有这一种顺序：

<video controls><source src="lesson.mp4" type="video/mp4"><track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default><track kind="subtitles" src="en.vtt" srclang="en" label="English"></track></track></source></video>

多个 可并列，顺序不影响功能，但影响默认选中逻辑（第一个带 default 的优先启用）。

四个属性一个都不能少：kind、src、srclang、label

浏览器只按显式声明识别轨道，缺任一属性，该 就不会出现在字幕菜单中，哪怕文件路径是对的。

• kind="subtitles"：必须写全，不能省略，不能拼错（如 caption 或 subtitles 末尾空格都会失败）
• src：必须是可访问的相对或绝对 URL；不支持 Blob URL，设了也会被静默忽略
• srclang：必须是标准 BCP 47 语言标签，如 zh、zh-Hans、zh-Latn（拼音用这个）、en-US；写 chinese 或 pinyin 无效
• label：用户在右键菜单或控件栏看到的名字，为空时可能显示 “(no label)”

VTT 文件加载失败的三大静默原因

字幕不显示，90% 情况不是 HTML 写错了，而是 VTT 文件本身或服务端配置出问题，且浏览器通常不提示具体原因。

• 编码与 BOM：文件必须为 UTF-8 无 BOM 编码；Windows 记事本默认带 BOM，务必用 VS Code、Notepad++ 或 Sublime 保存为 “UTF-8 without BOM”
• 首行与格式：第一行必须是顶格、全大写、无空格、无 BOM 的 WEBVTT，后面必须跟一个空行；时间戳必须是 00:00:01.234 --> 00:00:04.567（毫秒严格三位，箭头前后两个空格）
• CORS 与 MIME 类型：如果 src 跨域，服务端必须返回 Access-Control-Allow-Origin: *；Nginx/Apache 还需显式配置 .vtt 的 MIME 类型为 text/vtt，否则 Safari 等可能拒绝解析

本地开发时用 file:// 协议打开 HTML，所有 .vtt 加载必然失败——必须起本地服务，例如 python3 -m http.server。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

JS 控制字幕前必须等 track.readyState === 2

直接设 track.mode = "showing" 很可能无效，因为字幕文件还没加载完。浏览器不会等你。

正确做法是监听加载完成状态：

• 监听 track.onload 事件
• 或轮询检查 track.readyState === TextTrack.LOADED（值为 2）
• 动态添加 后，video.textTracks 列表会更新，但内容不可用，直到加载完成

别依赖 video.subtitleEnabled —— 这个属性根本不存在。

最容易被忽略的是：WebVTT 解析器容错率为零，错一个字符（比如多一个空格、少一位毫秒、BOM 隐藏字节），整段 cue 就被跳过，而你什么提示都看不到。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！