前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库track kind captions subtitles 可访问性
HTML语义与文档

视频的 subtitles 和 captions 轨道有什么区别?

<track kind="subtitles"> 通常提供语音的另一语言文本;captions 面向不能听到声音的人,还应包含说话人和重要音效等信息。轨道还可用于描述、章节或元数据。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档#Web 可访问性
先看核心答案读代码示例
理解线索

字幕类型决定内容范围

  1. subtitles把对白翻译或转写成文字
  2. captions包含对白、说话人和关键音效
  3. kind声明轨道内容的用途

只把对白文本复制成 captions,可能漏掉“门铃响”等理解剧情所需的声音。

核心回答

先记住这个答案

<track> 给 <video> 或 <audio> 提供随播放时间同步的文本轨道。subtitles 常用于对白翻译或转写;captions 给听不到音频的人提供更完整的信息,除了对白还应包括重要音效和说话人变化。其他 kind 还有 descriptions、chapters、metadata。轨道文件和播放器支持之外,完整文字稿仍有独立价值。

  • subtitles 偏向语言翻译
  • captions 包括重要非语音声音
  • srclang 标记轨道语言
  • default 指定默认启用候选

教学视频需要哪种轨道

英文讲座给中文用户翻译时,可提供中文 subtitles;为听力受限的英文用户提供文本时,captions 应写出关键声音线索,不只是逐字对白。

两种用途的轨道HTML
<video controls src="lesson.mp4">
  <track kind="subtitles" src="lesson-zh.vtt"
    srclang="zh" label="中文翻译">
  <track kind="captions" src="lesson-en.vtt"
    srclang="en" label="English captions" default>
</video>

浏览器会根据轨道设置和用户选择显示相应文本。src 指向有时间轴的 WebVTT 文件;label 是用户在播放器菜单里看到的名称。 default 不等于强制所有用户都看到该轨道,播放器和用户偏好仍会影响最终选择。多条同类轨道的默认设置也应仔细管理。

章节和描述不是普通字幕

chapters 可提供可跳转的章节标题,descriptions 用于补充画面中无法从声音获知的信息,metadata 面向脚本而非直接显示。不能把所有文本轨道都写成 subtitles,否则播放器和辅助技术难以正确解释。

视频关键内容最好另有文字稿入口,便于不使用播放器的人浏览和检索。字幕与文字稿可以共享内容来源,但呈现方式和需求不同。

为同一语言制作轨道时,要先想清楚用户缺少的究竟是什么信息。若“门铃响了”推动剧情,只写说话人的台词,听不到声音的人仍会漏掉情节;这正是 captions 要补非语音线索的原因。翻译轨道则应把原语言内容译成目标语言,不能把英文字幕文件标成中文 srclang。

发布前至少在播放器里检查切换轨道、时间点和文字覆盖画面的情况。轨道文件格式正确只说明能加载,不代表文字出现的时机和阅读速度合理;特别是镜头变化很快的片段,需要人工跟着播放一次。

回答前,多想一步

容易答错的地方

把 captions 当成纯翻译字幕
captions 应包含理解内容所需的非语音声音信息;单纯语言翻译通常用 subtitles。
认为有轨道文件就不用检查内容
文件可能时间轴不准、漏译或缺重要音效,仍需人工验收。
试着用自己的话回答

面试官还会怎么问?

srclang 写什么?

写轨道文本的语言标记,例如 zh 或 en,让用户和浏览器知道文本语言。

章节轨道有什么用?

给播放进度提供有名称的片段,方便用户跳转和理解结构。

音频也能使用 <track> 吗?

可以使用文本轨道,但具体用户界面支持要在目标播放器中检验。

从一道题,走向一组知识

把知识连起来

表单与输入

form 的 accept-charset 会改变什么?不写会怎样?

WebVTT 字幕文件必须用 UTF-8;表单的 accept-charset 控制提交编码,不能用它修复字幕乱码。

表单与输入

读取输入框当前值,为什么用 value 而不是 getAttribute?

DOM 属性与 HTML 属性的关系也会影响脚本读取轨道状态。

参考资料

  • HTML:语义与文档参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 教学视频需要哪种轨道
  3. 章节和描述不是普通字幕
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑