HTML怎么用标签处理未正确加载的字幕-html教程-PHP中文网

track标签必须紧接在video内所有source之后且为直接子元素，否则浏览器静默忽略；WebVTT文件需首行WEBVTT、UTF-8无BOM、标准时间戳格式、服务端返回text/vtt MIME类型。

html怎么用标签处理未正确加载的字幕

track 标签位置错，字幕就等于没写

浏览器只在开始标签之后、所有结束之后的**紧邻位置**识别。它不认嵌套在

 里的 ，也不认写在  前面或  外面的——哪怕多一个换行或注释，都会被跳过。正确顺序必须是：
<video controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><track kind="subtitles" label="中文" srclang="zh" src="sub.vtt" default><p>您的浏览器不支持视频播放</p>
</track></source></source></video>


 必须是  的**直接子元素**，不能包在任何容器中
多个  之间不能有空行、 注释或文本节点
如果用了 ， 就得排在它后面；没用 ，也得紧贴  开始标签之后

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）

JS 控制字幕前必须等 track.readyState === 2
直接设 track.mode = "showing" 很可能无效——因为 .vtt 文件还没加载完，浏览器不会等你。

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										

监听 video.textTracks[i].onload，或轮询检查 track.readyState === 2（即 TextTrack.LOADED）再操作
禁用当前轨道时，记得把其他同 kind 的轨道设为 "disabled"，否则可能多轨同时显示
移动端 Safari 默认隐藏原生字幕按钮，且忽略 default 属性，必须自己做 UI + JS 控制 mode


srclang 和 label 写错，用户根本选不到字幕
srclang 不只是“语言标识”，它是 JS 切换轨道时定位的唯一依据；label 不只是 UI 文字，缺失会导致下拉菜单里只显示“字幕”两个字，用户无法区分中英文。


srclang 必须用标准 BCP 47 码，比如 "zh"、"en-US"，别用 "ch" 或 "cn"


label 必须显式写出，如 label="简体中文"，不能留空或依赖浏览器自动推断
多个  中只能有一个带 default，否则全部失效

本地开发时用 file:// 打开 HTML，所有 .vtt 加载都会失败——这不是代码问题，是协议限制。还有就是服务器没配 text/vtt MIME 类型，Safari 就直接拒收，连控制台都不报错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！