在video标签内嵌套track元素，置于source之后、/video之前，设置kind="subtitles"、srclang、label和src属性，并确保.vtt文件首行为WEBVTT、UTF-8无BOM编码、时间戳格式正确。
video 标签里怎么加字幕文件
HTML 本身不直接“写”字幕，而是通过 <track></track> 标签把外部字幕文件（通常是 .vtt）挂载到 <video></video> 上。浏览器原生支持，不用 JS 就能切换语言、显示隐藏字幕。
关键点：字幕必须是 WebVTT 格式，路径要对，且 <track></track> 必须作为 <video></video> 的子元素，放在 <source></source> 后面或直接放在 <video></video> 内部。
-
<track kind="subtitles"></track>是必需的，kind="captions"适合听障用户（含音效描述），普通教学微课用subtitles更合适 -
srclang必须填有效语言码，比如zh或zh-CN，否则浏览器可能忽略该轨道 -
label是用户在右键字幕菜单里看到的名字，建议写清楚，如label="中文（简体）" - 如果字幕不显示，先检查控制台有没有
Failed to load resource报.vtt路径 404
WebVTT 字幕文件长什么样、怎么写
不是随便写个文本就能当字幕。WebVTT 文件必须以 WEBVTT 开头，每段字幕用空行分隔，时间格式严格为 hh:mm:ss.mmm --> hh:mm:ss.mmm，中间两个空格。
常见错误：用中文冒号、逗号代替英文点号；时间重叠或倒序；第一行没写 WEBVTT 导致整个文件被忽略。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
WEBVTT 00:00:01.200 --> 00:00:04.500 大家好，欢迎学习 Python 基础。 00:00:04.600 --> 00:00:07.800 今天我们讲变量的定义方式。
- 时间戳毫秒位必须是三位，
00:00:01.2会失败，得写成00:00:01.200 - 文件编码必须是 UTF-8 无 BOM，否则中文会乱码（尤其 Windows 记事本默认带 BOM）
- 可以加
NOTE注释行，但必须独占一行且以NOTE开头，不影响播放
为什么加了 track 还不显示字幕
最常被忽略的是浏览器默认关闭字幕——即使加载成功，也得手动点视频右下角「字幕」按钮开启。开发时容易误以为没生效。
- Chrome/Firefox 默认不自动启用任何字幕轨道，哪怕只有一个
<track></track>；Safari 行为类似 - 用
default属性可设默认启用：<track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default></track>，但仅限一个轨道能加 - 移动端 Safari 对
default支持不稳定，iOS 16+ 才较可靠，测试务必真机验证 - 如果用了
preload="none"，部分旧版 Edge 可能延迟加载.vtt，导致首屏字幕空白
多个语言字幕怎么切、怎么避免冲突
一个 <video></video> 可以有多个 <track></track>，浏览器自动生成语言菜单。但要注意命名唯一性和属性组合。
- 每个
<track></track>的srclang值必须不同，zh和zh-CN视为不同语言，但实际切换时可能归为一类，建议统一用zh-CN -
label建议包含语言和类型，比如label="English (CC)"、label="中文（教学版）"，避免都叫“中文”导致用户无法区分 - 不要给多个
<track></track>都加default，浏览器只认第一个，其余会被忽略 - 动态切换（比如用户点按钮换字幕）不能靠改 DOM 属性实现，得用 JS 控制
track.mode，例如video.textTracks[0].mode = "disabled"
字幕轨道的加载和渲染依赖浏览器解析器，不是所有 .vtt 特性都被支持（比如 CSS 样式、定位块），教学微课保持纯文本+时间轴最稳妥。真正复杂样式需求，就得上 video.js 或 plyr 这类播放器库了。
