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