kind="subtitles"必须显式写出且精确匹配,对应srclang必需合法bcp 47码、label需明确可读;track须为video直接子元素且位于source之后;default仅首次生效且至多一个;webvtt文件须以webvtt开头、mime类型正确、cors合规。

kind="subtitles" 必须显式写出,不能省略或拼错
浏览器只认 kind="subtitles" 这个精确字符串,写成 kind="subtitle"、kind="captions"、kind="subtitles "(末尾空格)或漏掉该属性,轨道就完全不会出现在字幕菜单里——控制台也不报错,静默失效。
它和 kind="captions" 用途不同:subtitles 是为听懂语音但不懂语言的用户准备的翻译字幕;captions 是为听障用户设计的,包含声音描述(如“[音乐渐强]”“[电话铃响]”),且在部分浏览器中默认不显示在常规字幕开关里,需系统辅助功能开启才可见。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
-
kind="subtitles"对应的srclang必须提供,比如srclang="zh"或srclang="zh-Hans" -
kind="captions"虽然也支持srclang,但即使不写,浏览器也可能加载(不推荐依赖) - 别用
kind="text"或自定义值——无效,会被忽略
track 元素位置错了,kind 再对也没用
<track></track> 必须是 <video></video> 的**直接子元素**,且必须紧接在所有 <source></source> 之后、 之前。写在 <source></source> 前面、写在 <div> 里、或者用 JS 动态 <code>appendChild 插入,都会导致 video.textTracks.length === 0。
- ✅ 正确顺序:
<video><source src="x.mp4"><track kind="subtitles" ...></track></source></video> - ❌ 错误示例:
<video><track><source></source></track></video>或<video></video><track></track> - 浏览器解析时按 DOM 顺序读取:先
<source></source>确定媒体源,再逐个处理<track></track>注册轨道;顺序乱了,就当没这回事
srclang 和 label 不只是“可选装饰”,缺一不可
srclang 是语言标识符,不是随便写的字符串。label 是用户在播放器字幕菜单里实际看到的名字。两者都缺失或格式错误,会导致该 <track></track> 在右键菜单或控件栏里完全不可见。
-
srclang必须是合法 BCP 47 码,比如zh、en-US、ja、ar;ch、cn、chinese都无效 -
label建议带括号说明变体,比如label="中文(简体)"或label="English (UK)",避免纯label="zh" - 多个
<track kind="subtitles"></track>可并列,但每个都必须有独立的srclang和label
default 属性只影响首次加载,且只能设一个
default 是布尔属性,写了就生效,不用赋值。但它只在页面首次加载视频时起作用——用户手动切换过字幕后,浏览器会记住上次选择,default 就不再干预。
- 只能在一个
<track></track>上写default,否则行为未定义(多数浏览器会忽略全部) - 不加
default,字幕默认关闭;加了也不代表“永远启用”,仅首次播放时自动打开 - 想用 JS 控制开关,请操作
textTracks[i].mode = "showing"或"disabled",而不是反复改 HTML
text/vtt、路径是否跨域且带 CORS 头——这些环节任一出错,kind="subtitles" 就只是个摆设。最容易被忽略的是:文件开头必须是全大写 WEBVTT,且不能带 UTF-8 BOM。










