HTML编程 课程六：HTML5 新增多媒体标签
HTML5 引入了几个非常重要的多媒体标签，彻底改变了网页嵌入音频、视频、动画的方式。
以前我们需要依赖 Flash、Silverlight 或第三方插件，现在只需原生 HTML 标签就能实现高质量的多媒体内容。
HTML5 新增的核心多媒体标签
| 标签 | 全称 | 主要功能 | 是否自带控件 | 是否支持多源 | 典型使用场景 |
|---|---|---|---|---|---|
<audio> | Audio | 嵌入音频文件 | 是 | 是 | 背景音乐、播客、语音提示 |
<video> | Video | 嵌入视频文件 | 是 | 是 | 短视频、教学视频、产品展示视频 |
<source> | Source（配合 audio/video） | 指定多个媒体源（不同格式） | — | — | 兼容不同浏览器编码格式 |
<track> | Track（配合 video） | 添加字幕、章节、描述等文本轨道 | — | — | 视频字幕、多语言字幕、章节导航 |
1. <audio> 标签详解
基本语法
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签。
</audio>常用属性
| 属性 | 说明 | 是否必须 | 常用值示例 |
|---|---|---|---|
| controls | 显示播放控件（播放/暂停/音量等） | 通常要 | 无值（有就显示） |
| autoplay | 自动播放（注意：浏览器限制较多） | 否 | 无值 |
| loop | 循环播放 | 否 | 无值 |
| muted | 默认静音（常与 autoplay 一起使用） | 否 | 无值 |
| preload | 预加载策略 | 否 | auto / metadata / none |
| src | 音频文件地址 | 单源时用 | — |
推荐写法（兼容性最佳）
<audio controls preload="metadata">
<source src="happy-birthday.mp3" type="audio/mpeg">
<source src="happy-birthday.ogg" type="audio/ogg">
<source src="happy-birthday.wav" type="audio/wav">
抱歉，您的浏览器不支持 HTML5 audio 标签。
</audio>2. <video> 标签详解
基本语法
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
您的浏览器不支持 video 标签。
</video>常用属性
| 属性 | 说明 | 推荐场景 |
|---|---|---|
| controls | 显示播放控件 | 几乎所有公开视频 |
| autoplay | 自动播放（需 muted 配合才较容易生效） | 静音背景视频、广告 |
| loop | 循环播放 | 短循环视频、背景视频 |
| muted | 默认静音 | 与 autoplay 配合 |
| poster | 视频未播放时的封面图 | 提升视觉体验 |
| preload | 预加载策略（auto/metadata/none） | metadata 最常用（只加载元信息） |
| playsinline | 在行内播放（手机端不全屏） | 移动端短视频必加 |
| width/height | 指定尺寸（建议用 CSS 控制） | — |
推荐移动端兼容写法
<video controls playsinline autoplay muted loop poster="cover.jpg">
<source src="short-video.mp4" type="video/mp4">
<source src="short-video.webm" type="video/webm">
您的浏览器不支持 HTML5 video。
</video>3. <source> 与多格式兼容
浏览器对视频/音频格式支持不同：
| 格式 | 编码 | 浏览器支持情况（2025–2026） | 文件体积 | 推荐优先级 |
|---|---|---|---|---|
| MP4 | H.264 + AAC | 几乎全浏览器支持（包括 iOS Safari） | 中等 | 第一优先 |
| WebM | VP9 / AV1 + Opus | Chrome、Firefox、Edge 优秀，Safari 较晚支持 | 较小 | 第二优先 |
| Ogg | Theora + Vorbis | 老浏览器支持较好，现已较少使用 | 中等 | 备选 |
推荐顺序：先 MP4 → 再 WebM → 最后 Ogg（几乎不用了）
4. <track> 字幕标签（视频高级功能）
<video controls>
<source src="movie.mp4" type="video/mp4">
<!-- 中文字幕 -->
<track kind="subtitles" src="subtitles_zh.vtt" srclang="zh" label="中文" default>
<!-- 英文字幕 -->
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
<!-- 章节导航 -->
<track kind="chapters" src="chapters.vtt" srclang="zh" label="章节">
</video>kind 属性常见值
- subtitles：普通字幕（默认）
- captions：听障字幕（更详细描述声音）
- descriptions：视障描述（屏幕阅读器朗读）
- chapters：章节导航
- metadata：元数据（自定义用途）
WebVTT 格式（.vtt 文件）简单示例
WEBVTT
00:00:01.000 --> 00:00:04.000
欢迎体验我们的产品！
00:00:05.000 --> 00:00:08.000
这是一个很棒的介绍视频。5. 现代网页多媒体最佳实践（2025–2026）
- 始终使用 controls（除非你自己实现播放器 UI）
- 移动端必加 playsinline（防止自动全屏）
- autoplay 必须搭配 muted（浏览器策略）
- 提供多种格式（mp4 + webm 基本覆盖）
- 使用 poster 提升首屏体验
- 字幕用 track + WebVTT（提升可访问性）
- CSS 控制尺寸（不要在标签上写死 width/height）
- 考虑加载性能：preload=”metadata” + lazy loading（loading=”lazy”）
响应式视频推荐写法
<div class="video-container">
<video controls playsinline preload="metadata" poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default>
</video>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例 */
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>6. 小结与学习建议
HTML5 多媒体标签的核心价值：
- 不再依赖 Flash 等插件
- 原生支持、浏览器内置播放器
- 支持响应式、自适应
- 可编程控制（通过 JavaScript API）
下一课预告建议：
- JavaScript 如何控制
<video>和<audio>（play/pause/currentTime/volume 等） - HTML5 视频/音频事件详解（canplay、timeupdate、ended 等）
- 如何实现自定义视频播放器（进度条、音量、全屏等）
需要我继续讲解 JavaScript 操作多媒体标签 的内容吗？
或者你有其他想深入的点（比如 WebVTT 写法、视频优化技巧）？
