HTML5的`<video>`标签是现代网页设计中不可或缺的一部分，它使得在网页上嵌入视频变得简单且无需依赖第三方插件，如Adobe Flash Player。这个标签被引入以支持多种平台，包括移动设备，如智能手机和平板电脑，它们通常不支持Flash技术。
### `<video>`标签的基本结构
```html
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<!-- 不支持<video>标签时的备选内容 -->
您的浏览器不支持HTML5视频。
</video>
```
**属性说明：**
- `width`和`height`：分别指定视频播放器的宽度和高度，单位为像素。
- `src`：定义视频文件的URL，最好使用绝对路径。
- `controls`：如果包含此属性，视频将显示播放、暂停、音量等控制条。
- `autoplay`：如果存在，视频将在加载完毕后立即自动播放。
- `loop`：如果包含，视频将在播放结束后重新开始。
- `preload`：可以设置为`auto`（加载整个视频）、`meta`（仅加载元数据）或`none`（不预先加载）。
### 兼容性处理
由于不同的浏览器对视频格式的支持不同，为了确保跨平台兼容，通常需要提供多个视频源。例如：
```html
<video width="320" height="240" controls>
<source src="video.ogg" type="video/ogg"> <!-- Firefox 支持 -->
<source src="video.mp4" type="video/mp4"> <!-- Safari/Chrome 支持 -->
<!-- 对于不支持<video>标签的浏览器，使用Flash作为备选 -->
<object data="video.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf">
<param name="allowscriptaccess" value="always">
<param name="allowfullscreen" value="true">
您的浏览器不支持HTML5视频。
</object>
</video>
```
在这个例子中，`<source>`标签提供了不同格式的视频源，浏览器会选择第一个能识别的格式进行播放。如果所有格式都不支持，就会显示`<object>`标签内的Flash内容，但这部分对于现代浏览器已经不那么必要，因为大多数浏览器已经内置了对HTML5视频的支持。
### 视频编码与格式
- **Ogg（.ogv）**：这是一种开放的、无版权的视频格式，通常用于Firefox和其他支持Ogg的浏览器。
- **MP4（.mp4）**：H.264编码的MP4是目前最广泛支持的视频格式，适用于Safari、Chrome以及大部分移动设备。
- **WebM（.webm）**：这是Google推广的一种开放源代码的视频格式，适用于Firefox、Chrome和Opera。
### 音频轨道和字幕
`<video>`标签还支持添加音频轨道（audio tracks）和字幕（subtitles）。例如：
```html
<video src="video.mp4" controls>
<track kind="subtitles" src="subtitles.srt" srclang="en" label="English">
</video>
```
这里的`<track>`标签用于指定字幕文件，`kind`属性可以设置为"subtitles"、"captions"、"descriptions"、"chapters"或"metadata"。
### 总结
HTML5的`<video>`标签简化了在线视频的集成，提供了丰富的交互性和良好的平台兼容性。开发者可以通过提供多种视频格式来覆盖各种浏览器，并利用属性如`controls`、`autoplay`和`loop`来定制播放体验。同时，通过添加音频轨道和字幕，可以增强视频的可访问性和多语言支持。
