HTML字幕标签怎么写？完整语法代码一览-html教程-PHP中文网

标签必须嵌套在或内，kind与srclang须配对且用ISO 639-1码（如zh），vtt文件需UTF-8无BOM、正确MIME类型及WEBVTT头，default仅初启生效，跨域需CORS。

html字幕标签怎么写？完整语法代码一览

track 标签必须嵌在 video 内部，不能独立存在

浏览器只认或里的，写在外面或放在顶层会直接被忽略。它不是独立组件，而是轨道声明机制的一部分。

常见错误是把当成普通标签随便放，结果字幕菜单根本不出现。正确结构只有这一种：

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

kind 和 srclang 必须配对使用，否则语言识别失效

kind="subtitles" 是启用用户可选字幕的前提；如果错写成 kind="captions"，部分浏览器（如 Safari）可能不把它列入「字幕」菜单，而是归入「CC」子项，甚至隐藏。

srclang 不只是“备注”，它是浏览器自动匹配系统语言的唯一依据。值必须用 ISO 639-1 短码（如 zh、en、ja），不能写 zh-CN 或 Chinese —— 后者会导致自动启用失败。

srclang="zh" ✅ 浏览器能识别并匹配中文系统
srclang="zh-cn" ❌ 大小写敏感，多数浏览器不认
srclang="Chinese" ❌ 非标准码，完全无效

vtt 文件路径和编码出错，字幕加载静默失败

的 src 属性一旦 404 或返回非 text/vtt MIME 类型，浏览器不会报错，只会跳过该轨道——你点开字幕菜单，发现列表里根本没它。

必须检查三点：

htmlppt.skill

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

下载

文件路径是否相对正确（比如 src="sub/zh.vtt" 要和 HTML 文件位置对齐）
.vtt 文件保存为 UTF-8 无 BOM（带 BOM 会导致 Chrome/Firefox 解析失败，显示空白）
服务器配置了 .vtt 的 MIME 类型为 text/vtt（Nginx/Apache 需手动加，静态托管服务如 GitHub Pages 默认不支持，得换用 Netlify 或 Vercel）

一个最小可用的 zh.vtt 文件头必须是纯文本 WEBVTT（顶行，前后无空格、无空行、无 BOM）：

WEBVTT

1
00:00:01.000 --> 00:00:04.000
你好

default 属性只能设在一个 track 上，且仅影响首次加载

多个都加 default，浏览器只启用第一个；都不加，则默认关闭所有字幕——用户必须手动点开菜单选择。

这个属性不绑定用户偏好：一旦用户手动切换到英文，刷新页面后仍保持英文，不会因为 default 又切回中文。它只起“初始开关”作用，不是“永久默认”。

如果你要强制每次加载都用中文，除了加 default，还得配合 JS 做兜底：

const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
  const zhTrack = Array.from(video.textTracks)
    .find(t => t.language === 'zh');
  if (zhTrack) zhTrack.mode = 'showing';
});

真正容易被忽略的是：跨域 src 的在未配 CORS 的情况下，textTracks 列表里能看见轨道，但 mode 无法设为 showing，且控制台无提示——这种静默限制比 404 更难排查。