HTML5 的<video>元素改变了网页中嵌入视频的方式——无需依赖 Flash 或第三方插件，直接用原生代码即可播放视频，并提供丰富的 JavaScript API 用于控制播放、监听事件、甚至实时处理视频帧。本文将从基本用法、支持的格式、属性与方法、事件、自定义控件、高级技巧到性能优化，全面解析<video>的使用。
一、<video>元素基本用法
1.1 最简单的嵌入
<video controls></video>
src：视频文件路径。controls：添加浏览器默认的播放控件（播放/暂停、音量、进度条等）。
1.2 提供多个备用源（处理不同浏览器格式）
不同浏览器支持的视频格式不同，使用<source>子元素可以指定多个格式，浏览器会选择第一个能播放的。
<video controls> <source type="video/mp4"> <source type="video/webm"> <source type="video/ogg"> 您的浏览器不支持 video 标签。 </video>1.3 设置宽度、高度与封面图
<video controls poster="poster.jpg"></video>
width/height：指定视频播放器尺寸（建议设置，避免布局抖动）。poster：视频加载前或未播放时显示的图片。
二、支持的视频格式与编码
HTML5 没有强制规定统一格式，但主流浏览器普遍支持以下三种组合：
格式 | 容器 | 视频编码 | 音频编码 | 浏览器支持 |
MP4 |
| H.264 / AVC | AAC | 所有现代浏览器（首选） |
WebM |
| VP8 / VP9 | Vorbis / Opus | Chrome, Firefox, Edge, Opera |
Ogg |
| Theora | Vorbis | 兼容较旧浏览器（Firefox, Chrome） |
最佳实践：提供 MP4 + WebM 即可覆盖 99% 的用户。MP4 作为主要格式，WebM 作为备选。
注意：H.265（HEVC）虽然压缩率更高，但浏览器支持不统一（Safari 支持，Chrome 依赖硬件），目前不建议作为唯一格式。
三、<video>元素的核心属性
属性 | 类型 | 说明 |
| URL | 视频文件地址 |
| 布尔 | 显示内置控件 |
| 布尔 | 自动开始播放（现代浏览器通常要求视频静音才能自动播放） |
| 布尔 | 默认静音 |
| 布尔 | 循环播放 |
