HTML中track标签的default属性如何控制默认字幕的加载-html教程-PHP中文网

default属性不表示自动显示字幕，仅标识默认候选轨道；是否启用取决于用户偏好、浏览器策略及历史操作，且需确保vtt加载成功、格式合规、路径正确、标签位置合法，js主动设置mode="showing"并等待readystate===2才可靠。

html中track标签的default属性如何控制默认字幕的加载

default属性不等于自动显示字幕

加了 default 属性，字幕依然不出现，是正常现象。浏览器不会因为写了 default 就让字幕“一加载就显示”——它只表示这条轨道是“默认候选”，是否真正启用，取决于用户语言偏好、浏览器策略、甚至用户上次是否手动关过字幕。

常见错误是把 default 当作开关：以为只要写上，video.textTracks[0].mode 就一定是 "showing"。实际中，Chrome 可能设为 "showing"（前提是用户没关过），Firefox 和 Safari 多数情况下初始仍是 "disabled"，尤其在移动端 Safari 中，default 完全被忽略。

default 只能用在一个 <track></track> 上；多个都写 default，浏览器只认第一个，其余静默失效
srclang 必须符合 BCP 47 标准（如 zh、en-US），写成 chinese 或 zh_CN 会导致轨道注册失败，default 彻底无效
kind 拼错（比如 subtitle 少个 s，或带空格 "subtitles "）会让整个 <track></track> 被浏览器跳过解析

为什么写了default但textTracks里找不到或mode不是showing

根本原因往往是轨道压根没加载成功，而不是 default 失效。浏览器对 <track src="xxx.vtt"></track> 加载失败的处理非常安静：不报错、不触发 error 事件、控制台也无提示，你只能靠检查 video.textTracks 长度和每个 track.mode 值来判断。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

VTT 文件路径错误（如相对路径写错、本地用 file:// 协议导致 CORS 阻止）→ 轨道不进 textTracks 列表
服务器未返回 Content-Type: text/vtt → Chrome/Firefox 可能拒绝解析，Safari 更严格
VTT 文件格式非法（缺 WEBVTT 开头、时间戳毫秒位不足三位、编码含 BOM）→ 整个文件被跳过，轨道 readyState 为 0（not loaded）
<track></track> 没放在 <source></source> 之后、或被包在 <div> 里 → 浏览器不识别，DOM 存在但不挂载到 <code>video.textTracks
如何可靠地让某条字幕一加载就显示

别依赖 default，用 JS 主动设置 track.mode = "showing"。但必须等轨道加载完成，否则 textTracks 可能为空或 readyState 不足。
- 监听 loadedmetadata 或 canplay 事件比 DOMContentLoaded 更稳妥，因为 <track></track> 是异步加载的
- 遍历 video.textTracks，找 kind === "subtitles" 且 language === "zh" 的轨道，再设 mode；不要硬写索引 [0]
- 检查 track.readyState === 2（loaded）再操作，避免 race condition
- 示例代码：
```
video.addEventListener('loadedmetadata', () => {
  const track = Array.from(video.textTracks).find(t => 
    t.kind === 'subtitles' && t.language === 'zh' && t.readyState === 2
  );
  if (track) track.mode = 'showing';
});
```
Safari 和移动端的特殊限制

Safari（尤其是 iOS/iPadOS）对 <track></track> 的支持最保守：default 无效、右键菜单不显示字幕开关、甚至不渲染 ::cue 样式，除非你满足全部条件。
- 必须有至少一个 <track kind="subtitles" default></track>，Safari 才会在控件里显示「字幕」按钮（三点菜单）
- 若用 HLS/DASH，<track></track> 标签完全不生效——流媒体字幕需由 hls.js/dash.js 等库接管，不能指望原生 HTML
- 动态插入的 <track></track>（如 JS 创建后 append），必须在 video.load() 之前完成，否则部分 Safari 版本不识别
- 用户一旦手动关闭过字幕，浏览器会持久化该选择，下次访问直接跳过 default 逻辑——这不是 bug，是规范行为，JS 强制设置是唯一绕过方式