如何在 HTML 中嵌入音频和视频？

、 音频标签

`` 用来在页面嵌入音频文件，支持 mp3、ogg、wav 等音频格式。

基础语法

<audio src="music.mp3" controls>

二、 视频标签

<video> 用来嵌入视频，常用格式 mp4、webm。

基础语法

<video src="movie.mp4" controls width="500"></video>

三、audio 和 video 共用属性

这两个媒体标签大部分属性是通用的：

1. src：媒体资源地址，可以是本地路径，也可以是网络 URL。
2. controls：布尔属性，写上就会显示浏览器自带播放控件（播放、暂停、进度条、音量），不加则没有控制面板。
3. autoplay：布尔属性，页面加载完成自动播放。

⚠️ 注意：现代浏览器策略限制，带 autoplay 时一般要求同时加上 muted 静音才能自动播放，防止扰民。

4. loop：布尔属性，媒体播放结束后自动从头循环播放。
5. muted：布尔属性，默认静音。

布尔属性特点：只写属性名就生效，不需要写 属性="true"。

例：<audio controls> ✅ 生效

四、video 独有的属性

只有 <video> 标签支持：

1. width：设置视频宽度，单位 px，只写数字即可；建议只设置宽度，高度自适应，避免画面拉伸变形。
2. height：设置视频高度。宽高同时设置比例和原视频不一致时，画面会拉伸。
3. poster：视频封面图地址，视频还没开始播放的时候显示这张图片。
4. playsinline：移动端专属属性，让视频在页面内联播放，而不是自动拉起全屏播放器（微信、Safari 移动端很常用）。

五、完整示例代码

音频完整示例

<!-- 音频：带控件、循环、默认静音 -->
<audio src="bgm.mp3" controls loop muted>

视频完整示例

<!-- 视频：控件、封面、宽度、移动端内联播放 -->
<video 
  src="demo.mp4" 
  controls 
  width="600" 
  poster="cover.jpg" 
  playsinline
>
  你的浏览器不支持 video 标签
</video>

六、兼容提示（source 标签拓展）

如果想要兼容多种媒体格式，可以不用 src，搭配 <source> 子标签，浏览器会自动选择第一个能识别的文件：

<video controls width="600">
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  浏览器不支持视频播放
</video>

audio 同样支持 source：

<audio controls>
  <source src="music.mp3" type="audio/mpeg">

七、常见踩坑总结

1. autoplay 自动播放失效：浏览器安全策略，非静音下大多禁止自动播放；
2. 视频在手机打开直接全屏：缺少 playsinline；
3. 音视频加载失败：检查 src 路径是否正确、文件地址是否跨域；
4. 不要随意同时写死 width 和 height，容易拉伸画面。

结尾

`` 和 <video> 是 HTML5 非常实用的原生媒体标签，属性简单好记。基础需求用这几个属性基本就能搞定，复杂场景还可以搭配 JS 获取媒体对象，写自定义播放器、监听播放进度等。