第08篇：音频与视频
第08篇：音频与视频
从静态图片到动态音视频，多媒体让网页体验更加丰富。本篇学习如何在网页中嵌入音频和视频内容，并处理兼容性、可访问性等问题。
学习目标
- 掌握
video和audio标签的基本用法和常用属性 - 理解多格式回退机制，解决浏览器兼容问题
- 学会使用
track添加字幕，提升可访问性 - 了解视频封面、自动播放策略和常见陷阱
- 能够独立嵌入视频、音频和字幕到网页中
核心知识点
一、视频标签：video
video标签用于在网页中嵌入视频内容。
<videosrc="movie.mp4"controlswidth="640"height="360"poster="cover.jpg">您的浏览器不支持视频播放。</video>video核心属性
| 属性 | 作用 | 示例值 |
|---|---|---|
src | 视频文件路径 | "movie.mp4" |
controls | 显示播放控件（播放/暂停/进度条/音量） | 无值属性 |
autoplay | 自动播放 | 无值属性 |
muted | 默认静音 | 无值属性 |
loop | 循环播放 | 无值属性 |
poster | 视频封面图（加载前显示） | "cover.jpg" |
preload | 预加载策略 | "auto"、"metadata"、"none" |
width/height | 播放器尺寸 | "640"/"360" |
各属性详解
controls
<!-- 显示浏览器原生的播放控件 --><videosrc="movie.mp4"controls></video>如果不加controls，视频将不会显示任何播放按钮，用户无法交互（除非用 JavaScript 控制）。
autoplay与muted（重要！）
<!-- ❌ 大多数浏览器会阻止自动播放有声视频 --><videosrc="movie.mp4"autoplay></video><!-- ✅ 静音的视频可以自动播放 --><videosrc="movie.mp4"autoplaymuted></video>🔇浏览器策略：为了防止打扰用户，Chrome、Safari、Firefox 等主流浏览器都禁止自动播放有声视频。只有用户与页面交互后，或有声自动播放被用户明确允许的网站才能突破此限制。
poster
<videosrc="movie.mp4"controlsposter="video-cover.jpg">视频封面会在视频加载前显示</video>poster指定的图片会在视频加载完成前显示，相当于视频的"封面"。
preload
| 值 | 行为 | 使用场景 |
|---|---|---|
auto | 尽可能预加载整个视频 | 视频是页面主要内容 |
metadata | 只加载元数据（时长、尺寸等） | 默认推荐 |
none | 不预加载 | 视频不太可能被播放，节省流量 |
二、多格式回退
不同浏览器支持的视频格式不同，必须提供多个格式源。
常见视频格式兼容性
| 格式 | Chrome | Firefox | Safari | Edge | IE |
|---|---|---|---|---|---|
| MP4 (H.264) | ✅ | ✅ | ✅ | ✅ | ✅ |
| WebM | ✅ | ✅ | ❌ | ✅ | ❌ |
| Ogg (Theora) | ✅ | ✅ | ❌ | ✅ | ❌ |
使用source实现格式回退
<videocontrolswidth="640"height="360"poster="cover.jpg"><!-- 优先尝试 WebM（体积更小） --><sourcesrc="movie.webm"type="video/webm"><!-- 回退到 MP4（兼容性最好） --><sourcesrc="movie.mp4"type="video/mp4"><!-- 最后的文本提示：当浏览器不支持 video 标签时显示 --><p>您的浏览器不支持视频播放。您可以<ahref="movie.mp4">下载视频</a>观看。</p></video>浏览器的选择逻辑：
1. 浏览器从上到下检查 source 2. 遇到支持的格式就加载，忽略后面的 3. 所有 source 都不支持 → 显示 video 标签内的文本内容type属性的完整写法
<!-- 更精确的 type 可以帮浏览器更快决策 --><sourcesrc="movie.mp4"type="video/mp4; codecs="avc1.42E01E,mp4a.40.2"">💡 实际开发中，通常写
type="video/mp4"就足够了。只有在遇到兼容性问题时才需要精确到 codec。
三、音频标签：audio
audio的用法和video几乎一样，只是没有画面。
<audiocontrols><sourcesrc="music.mp3"type="audio/mpeg"><sourcesrc="music.ogg"type="audio/ogg"><p>您的浏览器不支持音频播放。</p></audio>音频格式兼容性
| 格式 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| MP3 | ✅ | ✅ | ✅ | ✅ |
| Ogg Vorbis | ✅ | ✅ | ❌ | ✅ |
| WAV | ✅ | ✅ | ✅ | ✅ |
| AAC | ✅ | ✅ | ✅ | ✅ |
MP3 的兼容性已经足够好，大多数情况下提供 MP3 即可。
audio专属属性
audio和video共享大部分属性，但audio没有poster、width、height（因为没有视觉画面）。
四、字幕与轨道：track
track元素为视频添加字幕、章节标题或描述性文本，大幅提升可访问性。
<videocontrolswidth="640"height="360"><sourcesrc="movie.mp4"type="video/mp4"><!-- 中文字幕 --><trackkind="subtitles"src="subtitles-zh.vtt"srclang="zh"label="中文"default><!-- 英文字幕 --><trackkind="subtitles"src="subtitles-en.vtt"srclang="en"label="English"><!-- 章节导航 --><trackkind="chapters"src="chapters.vtt"srclang="zh"label="章节"></video>track属性
| 属性 | 说明 | 示例 |
|---|---|---|
kind | 轨道类型 | subtitles/captions/descriptions/chapters/metadata |
src | 字幕文件路径（.vtt格式） | "subtitles.vtt" |
srclang | 字幕语言 | "zh"、"en" |
label | 显示给用户的选择标签 | "中文"、"English" |
default | 默认启用此轨道 | 无值属性 |
字幕文件格式：WebVTT（.vtt）
WEBVTT 00:00:01.000 --> 00:00:05.000 欢迎来到 HTML 音视频教程 00:00:05.500 --> 00:00:10.000 今天我们将学习如何在网页中嵌入视频 00:00:10.500 --> 00:00:15.000 以及如何处理多格式兼容性问题kind的五种类型
| 类型 | 用途 | 受众 |
|---|---|---|
subtitles | 翻译字幕 | 听不懂视频语言的用户 |
captions | 完整字幕（含音效描述） | 听障用户 |
descriptions | 画面描述（音频读出） | 视障用户 |
chapters | 章节导航 | 所有用户 |
metadata | 脚本/数据（不显示） | JavaScript 使用 |
💡subtitles vs captions：
subtitles只翻译对话，captions还包含音效描述（如"[敲门声]“、[音乐响起]”）。在美国，法律规定视频必须有 captions。
五、嵌入外部视频平台
除了托管自己的视频，更常见的是嵌入 YouTube、Bilibili 等平台的视频。
嵌入 Bilibili 视频
<!-- Bilibili 分享 → 嵌入代码 --><iframesrc="//player.bilibili.com/player.html?bvid=BV1xx411c7mD"width="800"height="600"frameborder="0"allowfullscreen></iframe>嵌入 YouTube 视频
<iframesrc="https://www.youtube.com/embed/VIDEO_ID"width="560"height="315"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>iframe 嵌入的安全建议
<!-- 使用 sandbox 限制 iframe 权限 --><iframesrc="https://www.youtube.com/embed/VIDEO_ID"sandbox="allow-scripts allow-same-origin allow-presentation"allowfullscreen></iframe>⚠️ 嵌入第三方视频时，要注意 iframe 的
sandbox属性和referrerpolicy，限制不必要的权限。详见第18篇《嵌入外部内容》。
六、视频最佳实践
视频文件大小优化
| 策略 | 说明 |
|---|---|
| 压缩视频 | 使用 HandBrake、FFmpeg 等工具压缩 |
| 选择合适的分辨率 | 不需要在手机上加载 4K 视频 |
| 使用 CDN | 视频文件放在 CDN 上，加速全球访问 |
| 流媒体协议 | 大视频使用 HLS 或 DASH 协议分段加载 |
移动端注意事项
<!-- 移动端视频默认全屏播放（iOS Safari） --><videosrc="movie.mp4"controlsplaysinline>playsinline 允许视频在页面内播放，而不是强制全屏</video>| 属性 | 作用 |
|---|---|
playsinline | iOS Safari 中在页面内播放（不自动全屏） |
webkit-playsinline | iOS 旧版本的兼容性写法 |
动手练习
练习 1：完整的视频播放器
创建一个包含以下特性的视频播放器：
- 提供 MP4 和 WebM 两种格式
- 设置视频封面（poster）
- 显示播放控件
- 添加中文字幕（使用 WebVTT 格式）
- 视频加载失败时显示友好的降级提示
练习 2：音频播放器页面
创建一个音乐播放列表页面：
- 至少 3 首音频，使用
audio标签 - 每首音频显示标题和时长
- 音频默认不自动播放
- 考虑移动端自动播放限制，添加提示说明
练习 3：WebVTT 字幕制作
为一个 30 秒的视频片段编写.vtt字幕文件：
- 文件开头有
WEBVTT标记 - 至少包含 5 条字幕
- 时间格式正确（
HH:MM:SS.mmm） - 在 video 标签中用
track引用并测试
常见误区 ⚠️
| 误区 | 真相 |
|---|---|
“autoplay可以让视频自动播放” | 现代浏览器禁止有声自动播放，必须配合muted |
| “只提供 MP4 就够了” | MP4 兼容性最好，但 WebM 体积更小。建议同时提供两者 |
“video里面可以不写任何内容” | 建议写降级提示：不支持 video 标签的浏览器会显示这段文字 |
“字幕文件用.srt格式” | HTML 标准使用WebVTT（.vtt）格式，不是 SRT |
“preload="auto"总是好的” | 会消耗流量。如果用户大概率不播放，用"none" |
| “视频越大越清晰越好” | 要平衡画质和加载速度。考虑提供多分辨率 |
| “iOS 上视频会自动全屏” | iOS 10+ 支持playsinline属性在页面内播放 |
| “音频和视频标签完全一样” | 很相似，但 audio 没有poster、width、height |
速查卡片 📋
video标签完整模板
<videocontrolswidth="640"height="360"poster="cover.jpg"preload="metadata"playsinline><sourcesrc="movie.webm"type="video/webm"><sourcesrc="movie.mp4"type="video/mp4"><trackkind="subtitles"src="subtitles-zh.vtt"srclang="zh"label="中文"default><trackkind="subtitles"src="subtitles-en.vtt"srclang="en"label="English"><p>您的浏览器不支持视频播放。<ahref="movie.mp4">下载视频</a></p></video>audio标签模板
<audiocontrolspreload="metadata"><sourcesrc="music.mp3"type="audio/mpeg"><sourcesrc="music.ogg"type="audio/ogg"><p>您的浏览器不支持音频播放。</p></audio>视频格式回退优先级
WebM（体积小）→ MP4（兼容好）→ 文本提示WebVTT 基本格式
WEBVTT 00:00:01.000 --> 00:00:05.000 第一行字幕 00:00:05.500 --> 00:00:10.000 第二行字幕trackkind 类型
| kind | 用途 |
|---|---|
subtitles | 翻译字幕 |
captions | 完整字幕（含音效） |
descriptions | 画面描述 |
chapters | 章节导航 |
metadata | 脚本数据 |
自动播放策略
想自动播放视频？ ├── 静音？ → ✅ autoplay + muted └── 有声？ → ❌ 浏览器会阻止（需用户交互后）视频/音频 checklist
- 提供至少两种格式（MP4 + WebM / MP3 + Ogg）
- 添加
controls让用户可以操作 - 首屏视频不需要自动播放（或
autoplay muted） - 需要字幕时提供 WebVTT 文件
- 视频有
poster封面图 - 移动端添加
playsinline
扩展阅读
- MDN: 元素
- MDN: 元素
- MDN: 元素
- MDN: WebVTT
- Google Web.dev: 视频优化（英文）
📌下一步：多媒体让页面生动起来了。进入 第09篇：列表三种形态，学习用列表组织和展示信息。