第 6 课 10 / 18 | 编码:L06-12
核心知识

字幕、摘要与备用内容

媒体内容应在听不见、看不见或加载失败时仍能获得关键信息。

  • track 可加载独立的定时文字
  • 摘要概括内容,文字稿提供可直接阅读的唱词;两者都放在 video 外部
  • 画面自带字幕不能通过 track 开关删除;完整无障碍字幕还需核对唱词与声音说明
<video controls src="demo/huangmei-opera.mp4">
  <track kind="subtitles" src="demo/huangmei-lyrics.vtt" srclang="zh" label="中文字幕" default>
  您的浏览器不支持 video 元素。
</video>
<p>摘要:唱段中的人物为救李郎参加科举、考中状元,
并说明自己并非为了名利做官。</p>
<details>
  <summary>展开唱段文字稿</summary>
  <p>为救李郎离家园,谁料皇榜中状元……</p>
</details>
<p><a href="demo/huangmei-opera.mp4">单独打开视频</a></p>

VTT 文件按“开始时间 → 结束时间 → 文字”组织。本地 file:// 可能限制外部字幕加载,下方离线示例用 TextTrack API 添加相同唱词字幕;网站环境可使用上面的 track 写法。

文字摘要:不播放,也能了解主要内容

韩再芬演唱黄梅戏《谁料皇榜中状元》。唱段中的人物为救李郎参加科举、考中状元,回顾赴宴、巡街与受到赞誉的经历,并说明自己并非为了名利做官。

展开完整唱段文字稿

为救李郎离家园,谁料皇榜中状元。
中状元着红袍,帽插宫花好新鲜。

我也曾赴过琼林宴,我也曾打马御街前。
人人夸我潘安貌,原来纱帽罩婵娟。

我考状元不为把名显,我考状元不为做高官。
为了多情李公子,夫妻恩爱花好月(儿)圆。

视频无法播放时,还能看什么?

上面的摘要和文字稿位于播放器外,不依赖视频加载。也可以单独打开视频(新标签页);这个链接仍指向同一文件,不能解决文件丢失或格式不支持的问题。

<video> 内的“浏览器不支持”文字是兼容提示:仅在浏览器不支持该元素时作为替代内容。浏览器支持视频元素、但文件加载失败时,不会因此自动显示这段文字。

开关唱词字幕,区分字幕与画面文字

在新标签页打开演示