77. source 与 track 标签

本节目标：学会用 source 标签提供多源文件，用 track 标签为视频添加字幕。

<source> 和 <track> 是 <audio> 和 <video> 的左膀右臂。一个解决”浏览器播不了”的问题，一个解决”用户听不懂”的问题。

source 标签：多源选择

<source> 标签为媒体元素提供多个资源文件。浏览器从上往下挑，用第一个支持的格式。

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  你的浏览器不支持视频播放。
</video>

<source> 必须写在 <audio> 或 <video> 内部，不能单独使用。

常用属性

属性	作用
`src`	媒体文件 URL
`type`	MIME 类型，帮助浏览器快速判断
`media`	媒体查询，匹配不同屏幕尺寸

type 属性不是必须的，但加上能帮浏览器快速跳过不支持的格式，省得去下载文件头检测。

<source src="movie-hd.mp4" type="video/mp4" media="(min-width: 800px)">
<source src="movie-sd.mp4" type="video/mp4">

Note

<source> 是自闭合标签，不需要闭合标签。HTML5 中写作 <source> 即可。

track 标签：添加字幕

<track> 标签为视频添加字幕、章节标题等文本轨道。字幕文件通常是 .vtt 格式（WebVTT）。

<video controls width="640" src="movie.mp4">
  <track src="subtitles-zh.vtt" kind="subtitles" srclang="zh" label="中文字幕" default>
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

常用属性

属性	作用
`src`	字幕文件 URL
`kind`	轨道类型（subtitles/captions/descriptions/chapters/metadata）
`srclang`	字幕语言（如 zh、en）
`label`	显示给用户的名称
`default`	默认启用

kind 的几种值：

subtitles：翻译对话，给听不懂原声的用户
captions：包含音效描述，给听障用户
descriptions：视频画面描述（屏幕阅读器用）
chapters：章节导航

WebVTT 字幕格式

WebVTT 是网页视频字幕的标准格式，后缀 .vtt。

WEBVTT

00:00:01.000 --> 00:00:04.000
大家好，欢迎来到这节课

00:00:05.000 --> 00:00:08.000
今天我们来学习 track 标签的用法

格式很简单：时间戳 + 箭头 + 文字。时间格式是 时:分:秒.毫秒。

Tip

字幕文件必须以 WEBVTT 开头，后面空一行再写内容。

完整示例

一个带多源和字幕的视频播放器：

<video controls width="640" poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="zh.vtt" kind="subtitles" srclang="zh" label="中文" default>
  <track src="en.vtt" kind="subtitles" srclang="en" label="English">
  你的浏览器不支持视频播放。
</video>

小结

<source> 为媒体元素提供多个资源文件
type 属性帮助浏览器快速判断格式
<track> 为视频添加字幕、章节等文本轨道
字幕文件用 WebVTT 格式（.vtt）
两个标签都写在 <audio> 或 <video> 内部