HTML 媒体(Media)
网页里的"媒体"通常指音频和视频。HTML5 之前播放音视频要靠 Flash 等插件，如今用 <video> 和 <audio> 两个原生标签即可，无需安装任何插件。本节先总览 HTML 媒体，后续两节再分别细讲音频和视频的播放。
什么是 HTML 媒体
HTML 媒体指通过标签在网页中呈现的多媒体内容，最常见的是：
- 视频：宣传片、教程、直播回放。
- 音频：背景音乐、播客、语音消息。
- 图片虽也属于广义媒体，但本节重点在音视频。
支持的媒体格式
格式是媒体能否播放的关键，不同浏览器支持范围有差异：
- 视频常见格式：MP4（H.264）、WebM、Ogg。
- 音频常见格式：MP3、WAV、Ogg Vorbis。
- MP4 与 MP3 兼容性最好，几乎是所有现代浏览器的"底线"。
| 内容 | 格式 | 特点 |
|---|---|---|
| 视频 | MP4 | 兼容广、压缩好，最推荐 |
| 视频 | WebM | 开放格式，文件较小 |
| 音频 | MP3 | 通用性强 |
| 音频 | WAV | 无损但体积大 |
一个标签播放媒体
原生标签的写法非常简单：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>媒体示例</title>
</head>
<body>
<!-- 视频：controls 显示控制条，poster 为封面图 -->
<video src="movie.mp4" controls poster="cover.jpg"></video>
<!-- 音频：只有声音，没有画面 -->
<audio src="music.mp3" controls></audio>
</body>
</html>
在浏览器中显示为：页面上出现一个带播放按钮、进度条的视频窗口，下方是一个只显示控制条的音频播放器。
用 source 提供多个来源
不同浏览器对格式支持不同，可并列多个来源让浏览器自己选能播的那个：
<video controls width="480">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
浏览器按顺序尝试，能播放第一个就停止；全部不支持时显示标签内的提示文字。
控制与自动播放的注意点
- 不加 controls 就看不到控制条，用户无法操作。
- autoplay 自动播放常被浏览器拦截，静音（muted）状态下一般才允许。
- loop 循环播放，preload 控制预加载策略（auto / metadata / none）。
<!-- 静音、循环的背景视频，页面打开即自动播放 -->
<video src="bg.webm" autoplay muted loop></video>
小结：HTML 媒体就是原生 <video>、<audio> 标签加媒体格式的知识，配合 controls、source、autoplay 等属性即可在页面中稳定播放音视频，下面两节分别细讲。