10多媒体

网页早就不只是文字了——能播音频、放视频、画矢量图。本课把「图、音、视、字幕、矢量」一锅端： 每种媒体的最佳标签、最佳属性、最佳姿势。学完你能在文章里插一段带字幕的教学视频，给博客做一套 Retina 高清图，还能画一只可被 CSS 染色的矢量小图标。

约 17 分钟 8 个动手实验图片 / 音频 / 视频 / SVG

一、多媒体家族总览：九兄弟一图速记

HTML 的多媒体家族其实就九人：img、audio、video、source、track、picture、 figure、figcaption、svg。它们分工明确、互相嵌套，用一张关系图就能背下来： <video> 里套多个 <source> 备胎、再挂 <track> 字幕； <picture> 里也套 <source>，但目的不是「兜底」，是「按场景换图」。

<video>

video 套 source 是「兜底」、套 track 是「字幕」；
picture 套 source 是「按媒体查询换图」、套 img 是「保底渲染」；
figure 套 img + figcaption 是「图文配对的最语义容器」

多媒体九兄弟速查：干什么用、放在哪里、配什么
元素	用途	常见搭档
`<img>`	插入位图（jpg / png / webp / gif）	`srcset` / `sizes` / `loading` / `alt`
`<audio>`	网页里放音频	`<source>` 多格式 / `controls`
`<video>`	网页里放视频	`<source>` / `<track>` 字幕 / `poster`
`<source>`	给 audio / video / picture 备多个源	`src` / `type` / `media`
`<track>`	给 video 挂字幕 / 章节 / 元数据	`kind` / `srclang` / `label`
`<picture>`	按视口 / DPR 选不同源	内嵌 `<source>` + 兜底 `<img>`
`<figure>`	图文配对的语义容器	内嵌 img / video / svg + `<figcaption>`
`<figcaption>`	图注 / 视频说明	必须放在 figure 内
`<svg>`	内联矢量图（XML 画图）	path / circle / rect 等图形元素

记口诀：「图音像三兄弟，source 帮兜底，track 加字幕， picture 换场景，figure 装说明，svg 自己画」。九个人里最常用的就是 img、audio、video 三件套，其他六个是它们的「装备」。

二、img 进阶：让图片又快又稳

<img> 你已经在第 03 课学过 src 和 alt。这节课补齐剩下的「专业档」： 响应式多分辨率（srcset + sizes）、原生懒加载（loading）、异步解码（decoding）、防抖动的宽高（width / height）。写齐这五件套，你的图片加载就能压倒 90% 的同类型网站。

img 五件套：响应式 + 性能 + 防抖动
属性	作用	典型值 / 用法
srcset="x1.png 1x, x2.png 2x, x3.png 3x"	不同 DPR 给不同分辨率	Retina 屏自动取 2x / 3x 高清图
sizes="(max-width:600px) 100vw, 50vw"	告诉浏览器「图片在不同视口下占多大」	配 srcset 一起用才生效
loading="lazy"	原生懒加载：滚动到视口附近再加载	首屏图别加，列表末尾的图必加
loading="eager"	立即加载（默认值）	首屏、轮播图必加，省一次协商
decoding="async"	异步解码，不阻塞渲染	大图默认开，小图标开不开都行
width / height	占位尺寸，浏览器预先留坑	防 CLS（累积布局偏移）的关键

eager 立即加载 vs lazy 懒加载（真实图片对照）：打开 DevTools → Network 面板刷新页面，看左侧图片立刻请求、右侧要等滚动到视口附近才请求

不写 width / height 会让页面跳。浏览器不知道图多大，一开始按 0×0 渲染，等图下载完才把盒子撑开——下面的文字全被挤下去。解决办法：永远把图片的真实宽高写在标签上（width="800" height="450"），即使后面 CSS 要覆盖它。CLS 是 Core Web Vitals 指标之一，直接影响 SEO。

三、audio：网页里的播放器

<audio> 是音频专属标签。配 controls 才会显示浏览器自带的播放条（不配用户根本播不了）；src 直接指向 mp3 / ogg / wav。属性很少，但每一个都有讲究。

audio 七大属性逐项分析
属性	作用	使用建议
src	音频 URL（可写在外面，也可用 source 嵌套）	单文件直接写 src；多格式用 source
controls	显示播放控制条	不加用户无法操作，几乎必加
autoplay	自动播放	必须配 muted 才生效（浏览器政策）
muted	静音	背景音必加，免得吓用户一跳
loop	循环播放	背景音 / 演示音常用
preload="auto"	页面加载就预下载整段	移动端慎用，浪费流量
preload="metadata"	只预下载元数据（时长、第一帧）	推荐默认
preload="none"	完全不预下载	懒到极致，等用户点播放才下载

audio 七属性组合预览（浏览器原生控件可点击播放）：点控件播放 + 删任一行的 controls 看播放条消失

autoplay 几乎一定要配 muted。Chrome、Safari、Firefox 三家浏览器一致规定：任何带声音的自动播放必须「用户先有过交互」或「静音」——否则脚本再努力也是白搭。想让背景音乐一进页面就响？写 autoplay muted，再用一个独立的「静音开关」按钮解除静音。

四、video：视频播放完整属性

<video> 在 audio 全部属性的基础上，多出三项专享： poster（封面图）、width / height（设了防 CLS）。视频还有一道绕不过去的坎：格式之争——不同浏览器认不同的编码，同一个视频常要做两到三个格式兜底。

视频三大格式兼容对照表（截至 2026 年）
格式	编码	Chrome	Firefox	Safari	Edge	特点
MP4（H.264 + AAC）	avc1 + mp4a	✓	✓	✓	✓	最大公约数，兼容性最好
WebM（VP9 / AV1）	vp9 / av01 + opus	✓	✓	✗（仅 AV1 支持）	✓	体积小 30%，Safari 旧版不支持
Ogg Theora	theora + vorbis	✓	✓	✗	✓	老古董，逐渐被淘汰

真视频播放器（浏览器原生控件可用）：拖动进度条、按空格暂停，看右下角时间码更新；poster 封面用神里绫华作图

video 与 img 的最大区别：video 不写 width / height 时，浏览器默认 300×150——这会让首屏布局抖动。永远把真实的宽高写上，让浏览器提前留坑。和 img 同理，poster 封面也要写好 alt 般的描述。

五、source 多源与 picture 艺术指导

<source> 在 video 里是「兜底」——浏览器从上到下选第一个能播的；在 picture 里却是「按场景换图」——窄屏切裁切图、横屏切全景图、Retina 切高清图。同样一个标签，两套用法，对应不同需求。

video 内的 source vs picture 内的 source：兜底 vs 选优
对比项	video / audio 内的 source	picture 内的 source
目的	不同格式兜底（编码兼容性）	不同场景选最优图（艺术指导）
判断依据	浏览器「能不能解码」	`media` 查询（视口 / DPR）
属性重点	`type="video/mp4"`	`media="(max-width:600px)"`
兜底	多个 source 互为兜底	最后还要写一个 `<img>` 兜底
典型场景	跨浏览器视频兼容	响应式构图 / 高清图优化

三张图按窗口宽度自动切换（桌面默认神里绫华，缩小到 1200px 换云朵，再缩到 600px 换蓝天短发少女）：拖动浏览器窗口边缘看切换

picture 的灵魂是「裁切」，不是「放大」。 一张图横屏用没问题，窄屏就变「一根缝」——这时你需要的不是缩小，而是 换一张已经裁切好的窄屏构图。这就是「art direction（艺术指导）」的本意。 srcset 解决的是「清晰度」，picture 解决的是「构图」。

六、track：字幕与无障碍

<track> 挂在 video 内，给视频加字幕 / 章节 / 元数据。 kind 决定类型：subtitles（翻译字幕）、 captions（听障字幕，含音效）、descriptions（视障口述）、chapters（章节导航）、 metadata（给脚本用的元数据）。subtitles 是默认。

track kind 五种类型与无障碍场景
kind	中文	用途	典型用户
subtitles	字幕	翻译 / 原文台词	外语学习者 / 静音播放
captions	听障字幕	台词 + 音效描述（[爆炸声]）	听障人士
descriptions	口述音轨	视频画面的旁白	视障人士
chapters	章节	视频分段标题，跳转用	长视频导航
metadata	元数据	脚本用，浏览器不显示	JS 开发者

点视频右下角的「字幕」按钮（CC 图标）看轨道列表：能看到两条字幕轨道（中/英）但内容为空——因为没上传 .vtt 文件，把 track src 填上真实 VTT 路径就能加载

track 的 srclang 别忘写。这个属性告诉浏览器「这条字幕是什么语言」，是搜索引擎和多语言切换的依据。subtitle 文件本身是 .vtt 格式（WebVTT），第一行必须是 WEBVTT 加时间戳（如 00:00:01.000 --> 00:00:04.000），写错一个冒号字幕就废了。

七、figure / figcaption：图文配对的语义容器

第 06 课你已经见过 figure / figcaption。这节课强调它在「多媒体」语境下的角色： 任何图、音、视、矢量图，都可以装进 figure——figcaption 就是它的图注，读屏软件会自动把图注读出来，div 套法做不到这一点。

上下对照：上面用 figure + figcaption（语义图注），下面用 div + p（普通段落）；用屏幕阅读器或看源代码才能体会语义差异

figcaption 必须放在 figure 里、且不一定要写在最后。 标准位置是底部，但视觉上想图注在顶部（杂志风）也可以——figcaption 是 figure 的「第一个或最后一个孩子」，浏览器都认。但出了 figure 之外，figcaption 就变成了普通短语元素，含义失效。

八、SVG：矢量图的内联与引用

SVG（Scalable Vector Graphics） 是用 XML 描述矢量路径的语言—— 矢量图任意放大都不糊，跟分辨率无关。本站的 favicon 就是内联 SVG （看 head 里的 data:image/svg+xml）。它的三种用法各有取舍。

SVG 三种用法：内联 vs img vs CSS 背景
用法	语法	可被 CSS 染色	可被 JS 操控	典型场景
内联	直接把 `<svg>` 写在 HTML 里	✓	✓	图标库、可交互图形
img 引用	`<img src="x.svg">`	✗	✗	静态插画、logo
CSS 背景	`background-image: url(x.svg)`	✗（用 mask 才行）	✗	装饰背景、按钮图标

同一份内联 SVG 改 fill 属性换色：把第一个 circle 的 fill="#C08A3E" 改成 fill="#4E7A52"，看圆变绿

SVG 怎么都放不模糊的关键：viewBox。SVG 标签上写 width="60" height="60" 是「渲染大小」，而 viewBox="0 0 60 60" 是「坐标系」—— 它们可以不一样。viewBox 设成 0 0 100 100，width 设成 60， SVG 内部坐标按 100 算、最后缩放到 60 显示，这就叫「任意放大不糊」的原理。忘了写 viewBox，SVG 会按默认 300×150 渲染，所有路径错位。

九、本章小结

多媒体九兄弟：<img>、<audio>、<video>、<source>、<track>、<picture>、<figure>、<figcaption>、<svg>。
img 五件套：srcset + sizes（响应式）/ loading（懒加载）/ decoding（异步）/ width + height（防 CLS）。
audio 七属性：src / controls / autoplay / muted / loop / preload + source 多源；autoplay 必须配 muted。
video 在 audio 基础上多出 poster + width/height；格式兼容：MP4 全平台、WebM 体积小、Ogg 老旧。
source 在 video 里是「兜底」、在 picture 里是「按 media 选图」（艺术指导）；picture 末尾要写兜底 <img>。
track 五大 kind：subtitles（默认）/ captions / descriptions / chapters / metadata；记得写 srclang。
figure 是图、音、视的「语义包装」，figcaption 让读屏软件读图注；div 套法做不到。
SVG 三种用法：内联可染色可操控，<img> 静态不可改，CSS 背景纯装饰；viewBox 是任意放大的灵魂。

动手任务：给自己的一篇博客文章插入多媒体三件套—— (1) 一段 picture 包含窄屏（≤600px）和宽屏两个 source，最后兜底一个 img； (2) 一个 video 控件 + 中文与英文双语字幕轨道（中文 default）； (3) 一个 figure 包裹的 SVG 图标 + figcaption 图注。 纯静态展示，不写 JS，F12 看 Elements 面板里结构是否如你所愿。如果想真播视频，可以先用 https://...mp4 这类公开测试视频地址。