HTML字幕标签不显示怎么解决？快速修复与调试技巧-html教程-PHP中文网

必须紧接在所有之后、之前，且WebVTT文件需满足首行WEBVTT、UTF-8无BOM、严格时间戳格式、正确Content-Type四项条件，srclang/label/kind属性缺一不可，JS控制前须等待track.readyState === 2。

html字幕标签不显示怎么解决？快速修复与调试技巧

video里位置放错就等于没写

浏览器只在开始标签之后、结束标签之前，并且**紧接在所有之后**的位置识别。放错位置，它根本不会进video.textTracks列表。

常见错误包括：

写在前面（最常犯）
被包在或里
写在外面，哪怕只多一个换行符


多个之间插了或空

修复方法：把直接挪到闭合后、前，中间不加任何其他节点或空白。
WebVTT文件四个硬性条件缺一不可
Chrome/Firefox/Safari对.vtt文件极其严格——漏一条就静默失败：不报错、不加载、字幕空白。必须同时满足：

首行必须是WEBVTT（全大写，无空格，无BOM）
文件编码为UTF-8 无 BOM（VS Code右下角点编码 → “Save with Encoding” → 选UTF-8）
时间戳格式严格为00:00:01.234 --> 00:00:04.567，不能有SRT序号行、不能有空行分隔
服务器返回Content-Type: text/vtt（Nginx/Apache需手动配置MIME类型；本地file://协议下必然失败，必须起服务如python3 -m http.server）

srclang、label、kind属性一个都不能少
这三个属性不是“可选增强”，而是浏览器解析轨道的必需字段：

											
												
												
													Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
													实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
												
												下载
												
											
										


kind必须是"subtitles"、"captions"或"descriptions"之一；写成"subtitle"或留空，轨道直接被忽略

srclang是JS切换轨道时的唯一定位依据，推荐用BCP 47标准码，如"zh"、"en-US"；别用"ch"或"cn"


label不只是UI显示文字，缺失会导致下拉菜单里只显示“字幕”两个字，用户无法区分中/英/日等多语种轨道

多个中只能有一个带default属性，否则全部失效。
JS控制字幕前必须等track.readyState === 2

直接设track.mode = "showing"大概率无效——因为.vtt文件还没加载完，浏览器不会等你。
正确做法：

监听video.textTracks[i].onload事件
或轮询检查track.readyState === TextTrack.LOADED（即值为2）
启用某条轨道时，记得把同kind的其他轨道设为"disabled"，否则可能多轨叠加显示
移动端Safari默认隐藏原生字幕按钮，且不响应default，必须自己做UI + JS控制mode


最容易被忽略的是：本地开发时用file://协议打开HTML，所有.vtt加载都会失败；还有就是服务器没配text/vtt MIME类型，Safari会直接拒收，连控制台都不报错。