音频与视频

约 662 字大约 2 分钟

布欧-Lewyon

2026-05-16

HTML5 通过 <audio> 和 <video> 原生支持多媒体播放，无需 Flash。

`<audio>` 音频

<audio src="music.mp3" controls>
  您的浏览器不支持 audio 元素。
</audio>

属性

属性	作用
`src`	音频文件 URL
`controls`	显示播放控件（播放/暂停/音量/进度条）
`autoplay`	自动播放（⚠️ 大多数浏览器会阻止带声音的自动播放）
`loop`	循环播放
`muted`	静音（配合 `autoplay` 使用，静音自动播放通常允许）
`preload`	预加载策略：`none`（不预加载）/ `metadata`（仅元数据）/ `auto`（自动）

<!-- 静音自动播放（通常允许） -->
<audio src="bgm.mp3" autoplay muted loop></audio>

<!-- 不预加载：节省带宽 -->
<audio src="podcast.mp3" controls preload="none"></audio>

多格式兼容

不同浏览器支持的音频格式不同。用 <source> 提供多个备选：

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.wav" type="audio/wav">
  您的浏览器不支持 audio 元素。
</audio>

浏览器支持情况：

格式	Chrome	Firefox	Safari	Edge
MP3	✅	✅	✅	✅
OGG	✅	✅	❌	✅
WAV	✅	✅	✅	✅

MP3 是兼容性最好的格式。

`<video>` 视频

<video src="movie.mp4" controls width="640" height="360">
  您的浏览器不支持 video 元素。
</video>

属性

属性	作用
`src`	视频文件 URL
`controls`	显示播放控件
`autoplay`	自动播放（⚠️ 必须配合 `muted`）
`loop`	循环播放
`muted`	静音
`poster`	封面图片（视频加载前显示）
`width` / `height`	播放器尺寸
`preload`	预加载策略

<video
  src="intro.mp4"
  controls
  width="800"
  height="450"
  poster="poster.jpg"
  preload="metadata"
>
  您的浏览器不支持 video 元素。
</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">
  <p>您的浏览器不支持 video 元素。请 <a href="movie.mp4">下载此视频</a>。</p>
</video>

格式	Chrome	Firefox	Safari
MP4	✅	✅	✅
WebM	✅	✅	❌
OGV	✅	✅	❌

MP4（H.264 编码）是兼容性最好的视频格式。

字幕 `<track>`

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

<track> 支持的类型：

`kind` 值	用途
`subtitles`	字幕（翻译内容）
`captions`	描述（含音效说明，适合听障用户）
`descriptions`	视频描述（适合视障用户）
`chapters`	章节导航
`metadata`	元数据

在链接中使用多媒体

<!-- 点击图片播放视频 -->
<a href="intro.mp4">
  <img src="play-button.png" alt="播放介绍视频">
</a>

小结

标签	用途	关键属性
`<audio>`	音频播放	`src` `controls` `autoplay` `muted` `loop` `preload`
`<video>`	视频播放	`src` `controls` `poster` `width` `height`
`<source>`	多格式备选	`src` `type`（MIME 类型）
`<track>`	字幕/描述	`src` `kind` `srclang` `label`

上一节：图片与响应式图片下一节：嵌入内容与 iframe