html5的标签是为音视频元素提供字幕、描述、章节等文本轨道的标准方式，需嵌套在或内并设置kind、src、srclang、label、default等属性，配合utf-8编码的webvtt文件实现多语言支持与无障碍功能。
HTML5 的 <track></track> 标签是为视频（<video></video>）和音频（<audio></audio>）元素提供内置字幕、说明、章节等文本轨道的标准方式。它本身不显示内容，而是作为外部文本轨道的“连接器”，配合 WebVTT 文件实现多语言字幕、音轨描述（如为视障用户提供的音频描述）、章节导航等功能。
track 标签的核心属性与用法
<track></track> 必须嵌套在 <video></video> 或 <audio></audio> 元素内部，且需指定关键属性才能生效：
-
kind：定义轨道类型，常用值有
subtitles（字幕）、descriptions（音轨描述）、chapters（章节）、metadata（元数据，供脚本读取）、captions（带说话人和声音提示的封闭字幕） - src：指向 WebVTT（.vtt）格式的文本轨道文件，必须是同源或配置了 CORS 头
-
srclang：标明轨道语言代码（如
zh、en、ja），对subtitles和captions类型必需 - label：在播放器 UI 中显示的名称（如 “中文”、“English”），用于用户选择
- default：布尔属性，指定默认启用的轨道（仅一个可设为 true；若未设，默认无轨道激活）
WebVTT 文件格式要点
WebVTT 是纯文本格式，以 WEBVTT 开头，每段字幕由序号、时间轴（hh:mm:ss.mmm --> hh:mm:ss.mmm）和多行文本组成。注意以下细节：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 时间轴使用点号分隔毫秒（不是冒号），例如
00:01:23.450 --> 00:01:25.780 - 支持简单 HTML 标签：
<b></b>、<i></i>、<u></u>、<ruby></ruby>等（但不支持 script/style） - 中文需确保 .vtt 文件保存为 UTF-8 编码，且 HTTP 响应头或 meta 不冲突
- 描述类轨道（
kind="descriptions"）通常由屏幕阅读器读出，内容应简洁明确，如 “画面中主角推开木门，远处传来雷声”
多语言字幕切换与浏览器兼容性
现代浏览器（Chrome、Firefox、Edge、Safari 16+）原生支持 <track></track>，但行为略有差异：
- 用户可通过播放器右键菜单或设置按钮手动切换字幕语言（前提是多个
<track kind="subtitles"></track>已声明） - JavaScript 可通过
video.textTracksAPI 动态控制：遍历textTracks获取所有轨道，用mode属性设为"showing"、"hidden"或"disabled" - Safari 对
descriptions支持较弱，部分依赖系统辅助功能开启；移动端 iOS Safari 默认隐藏字幕控件，需显式添加controls属性并确保 track 有label - 无内置 UI 时（如自定义播放器），需自行监听
texttrackschange事件并构建语言选择器
实际应用建议与常见问题
要让 <track></track> 真正可用，需注意几个易忽略的环节：
- 确保 .vtt 文件可通过网络直接访问（测试方法：在浏览器地址栏打开该 URL，应显示纯文本而非下载或 404）
- 避免在
<track></track>上重复设置type="text/vtt"—— 浏览器自动识别，手动设置反而可能触发 MIME 类型校验失败 - 若字幕不显示，先检查控制台是否有 CORS 报错或 “Failed to load resource”；再确认
kind和srclang是否匹配用户系统语言偏好（部分浏览器会自动启用匹配语言） - 为提升可访问性，建议至少提供一条
kind="descriptions"轨道，并在<video></video>上添加aria-label或title属性说明视频主题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
