嵌入音频和视频：让网页“活”起来
现代 Web 不仅仅是静态文档，它更是一个多媒体平台。从网易云音乐的播放器到 Bilibili 的视频窗口，多媒体内容是留住用户的关键。
在 HTML5 出现之前，播放音视频需要依赖 Flash 等第三方插件，既不稳定也不安全。而现在，原生 HTML5 提供了<audio>和<video>标签，让我们能像插入图片一样轻松地嵌入多媒体。本文将带你掌握这两个标签的核心用法、属性配置以及格式兼容性处理。
一、音频标签：<audio>
<audio>标签用于在网页中嵌入音频内容，比如音乐、播客或有声书。
核心属性
controls：最常用。显示播放、暂停、音量等默认控制条。如果不加这个属性，音频将不可见且无法操作（除非用 JavaScript 控制）。autoplay：页面加载后自动播放。注意：现代浏览器为了用户体验，通常会禁止带声音的自动播放。loop：循环播放。muted：静音播放。配合autoplay使用通常可以绕过浏览器的自动播放限制。src：音频文件的链接。
代码示例
最简单的用法如下：
<audio controls src="music.mp3"> 您的浏览器不支持 audio 标签。 </audio>二、视频标签：<video>
<video>标签用于嵌入视频内容，它的用法与<audio>非常相似，但多了关于画面尺寸的控制。
核心属性
controls：显示控制条（播放、暂停、进度条、全屏等）。width和height：设置视频播放器的宽高（单位像素）。poster：封面图。在用户点击播放前显示的图片。如果没设置，默认显示视频的第一帧。autoplay、loop、muted：与音频标签含义相同。preload：预加载策略。none：不预加载（节省流量，适合移动端）。metadata：只加载元数据（时长、尺寸等）。auto：尽可能加载整个视频。
代码示例
<video controls width="640" height="360" poster="cover.jpg" src="movie.mp4"> 您的浏览器不支持 video 标签。 </video>三、进阶技巧：多格式兼容与<source>
这是多媒体开发中最头疼的问题：浏览器格式战争。
没有一种音视频格式被所有浏览器完美支持。例如：
- MP4 (H.264)：兼容性最好，几乎所有浏览器都支持。
- WebM：Google 推崇，压缩率高，Chrome/Firefox 支持好。
- Ogg：较老的开源格式。
为了保证你的视频在任何浏览器都能播放，我们不应该直接把src写在<video>标签上，而是使用<source>标签提供多个备选文件。浏览器会按顺序检查，使用第一个它支持的格式。
代码示例：视频的多源 fallback
<video controls width="640" poster="cover.jpg"> <!-- 优先尝试播放 MP4 --> <source src="movie.mp4" type="video/mp4"> <!-- 如果不支持 MP4，尝试 WebM --> <source src="movie.webm" type="video/webm"> <!-- 如果都不支持，显示提示文字或下载链接 --> <p>您的浏览器太老了，不支持 HTML5 视频播放。</p> <p>请 <a href="movie.mp4">点击这里下载视频</a> 观看。</p> </video>💡 小贴士：
对于音频<audio>，同样的逻辑也适用，只需将type改为audio/mpeg(MP3) 或audio/ogg。
四、实战练习：制作一个有声博客卡片
让我们结合之前的语义化标签，创建一个包含封面、标题和音频播放器的博客卡片。
任务：
- 使用
<article>包裹内容。 - 使用
<img>显示文章封面。 - 使用
<h2>显示标题。 - 嵌入一段音频，要求自动显示控制条。
参考答案：
<article style="border: 1px solid #ccc; padding: 20px; width: 400px; font-family: sans-serif;"> <img src="podcast-cover.jpg" alt="播客封面" style="width: 100%; border-radius: 8px;"> <h2>第15期：HTML5 多媒体详解</h2> <p>本期我们学习如何在网页中插入音频和视频。</p> <!-- 音频播放器 --> <audio controls style="width: 100%;"> <source src="episode15.mp3" type="audio/mpeg"> <source src="episode15.ogg" type="audio/ogg"> 您的浏览器不支持音频播放。 </audio> </article>五、常见问答
问：为什么我的视频设置了autoplay却不自动播放？
答：现代浏览器（Chrome, Safari, Edge 等）为了不打扰用户和节省流量，默认禁止带声音的自动播放。如果你想实现自动播放，必须同时加上muted（静音）属性。例如：<video src="..." autoplay muted loop></video>。
问：MP4 和 WebM 怎么选？
答：通常建议两个都提供。将 MP4 放在第一位作为兜底（兼容性最好），WebM 放在前面可以节省带宽（文件更小）。现在的标准做法是同时提供这两种格式。
问：可以直接嵌入 YouTube 或 Bilibili 的视频吗？
答：可以，但这通常使用<iframe>标签（我们第 16 篇会详细讲）。<video>标签主要用于托管在你自己的服务器上的视频文件。
结语：
掌握了<audio>和<video>，你的网页就不再是枯燥的文字堆砌，而是变得有声有色。