# 插入视频

URL: https://caijiao.org/html/06-multimedia/01-video
Source: docs/html/06-multimedia/01-video.md
Description: HTML 提供了 标签用于在网页中嵌入视频文件，支持格式如 MP4、WebM，并可设置控制条、自动播放、循环等属性，提升内容表现力。

HTML 使用 `<video>` 标签来在网页中插入和播放本地或网络视频，为用户提供更丰富的多媒体体验。

## 基本语法

```html
<video src="video.mp4" controls></video>
```

- `src`：视频文件路径（可为本地或网络地址）
- `controls`：显示播放控件（播放、暂停、音量等）

## 常用属性

- `autoplay`：页面加载后自动播放（通常需配合 `muted` 才能生效）
- `loop`：循环播放
- `muted`：静音播放
- `poster`：设置视频封面图片
- `width` 和 `height`：设置视频尺寸

### 示例

```html
<video
  src="video.mp4"
  width="640"
  height="360"
  controls
  poster="thumbnail.jpg"
></video>
```

### 多格式兼容（推荐方式）

为了兼容不同浏览器，可以使用多个 `<source>` 标签：

```html
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  您的浏览器不支持视频播放。
</video>
```

## 视频格式支持

常见的视频格式及兼容性：

| 格式 | 类型       | 支持浏览器         |
| ---- | ---------- | ------------------ |
| MP4  | video/mp4  | 全面支持           |
| WebM | video/webm | Chrome、Firefox 等 |
| Ogg  | video/ogg  | 部分浏览器支持     |

通过 `<video>` 标签嵌入视频，不仅提升网页的表现力，也让内容更加生动直观，广泛应用于课程演示、产品介绍、新闻播放等场景。