HTML中track元素kind属性怎么正确配置-html教程-PHP中文网

kind属性必须显式写出且严格为subtitles/captions/descriptions/chapters/metadata之一，大小写敏感，拼写错误或留空将导致浏览器静默忽略整条track；同时需配合合法srclang、label、src及正确HTML结构才能使字幕正常渲染与切换。

html中track元素kind属性怎么正确配置

kind 属性必须显式写出、拼写完全正确、且只能是五个标准值之一，否则浏览器直接忽略整条 ——字幕不进菜单、JS 查不到、连加载日志都不会触发。

kind 值只能是 subtitles / captions / descriptions / chapters / metadata

浏览器只认这 5 个大小写敏感的字符串，其他任何写法都会被降级为 metadata（即：不渲染、不显示、不进字幕菜单）：

kind="subtitles"：纯对话翻译类字幕，面向外语观众；必须带 srclang，如 srclang="zh"
kind="captions"：含音效/说话人标识的隐藏式字幕（如 [电话铃响]），播放器 UI 中常标为 “CC”
kind="descriptions"：供屏幕阅读器读出画面信息的音频描述轨道，不显示在视频上
kind="chapters" 和 kind="metadata"：完全不参与字幕渲染，别拿来“凑数”
常见错误：kind="subtitle"（少 s）、kind="Subtitles"（大写）、kind=""（空值）、kind="text" —— 全部静默失效

为什么写了 kind="subtitles" 字幕还是不出现

光有 kind 不够，它只是准入门槛。真正让字幕“活起来”，还得同时满足：

htmlppt.skill

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

下载

srclang 必须是合法 BCP 47 语言码：zh、en-US、ja 可行；ch、Chinese、zh_CN、中文 全部无效
label 必须存在且有意义：为空时菜单可能显示 (no label)，用户无法区分中/英/日
必须是的**直接子元素**，且位于所有之后
VTT 文件需通过 HTTP 服务访问（file:// 协议下因 CORS 静默失败）
服务端返回 Content-Type: text/vtt，文件首行严格为 WEBVTT（无空格、无 BOM、全大写）

移动端 Safari 对 kind 的限制最狠

iOS/iPadOS Safari 不仅校验最严，行为也最反直觉：

即使写了 default，track.mode 默认仍是 "disabled"，不会自动启用
原生字幕按钮默认隐藏，用户根本看不到菜单 —— 必须用 JS 自己拉取 video.textTracks 渲染 UI，并手动设 track.mode = "showing"
若 kind 不是 "subtitles" 或 "captions"，Safari 连 onload 都不触发，DOM 里节点虽在，但 textTracks.length 为 0
测试时别只信 Chrome：真机连接 Safari DevTools，检查 video.textTracks 是否真实包含目标轨道，再确认 track.kind 和 track.srclang 字段是否非空