优化HTML视频加载需从三方面入手：1. 压缩视频文件，使用H.264编码并控制时长；2. 提供MP4和WebM格式适配不同浏览器；3. 设置preload="metadata"、结合懒加载与CDN加速，提升加载效率。
网页中HTML视频加载慢，会影响用户体验，尤其在移动端或网络较差环境下更明显。解决这个问题需要从视频本身、加载策略和浏览器行为三方面入手。以下是几个实用的优化技巧。
压缩视频文件大小
视频体积大是加载慢的主要原因。通过压缩可以显著提升加载速度。
选择合适的视频格式
不同浏览器对视频格式支持不同，提供多种格式可提升加载效率。
推荐同时提供 MP4、WebM 格式，利用 <source> 标签让浏览器自动选择最优格式：
立即学习“前端免费学习笔记（深入）”；
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持视频标签。
</video>
启用预加载（preload）
使用 preload 属性控制视频加载时机，平衡速度与流量消耗。
- preload="metadata"：只加载视频时长、尺寸等信息，最常用，节省流量
- preload="auto"：页面加载时自动下载整个视频，适合小视频或关键内容
- preload="none"：不预加载，用户点击才开始加载，节省带宽
示例：
<video controls preload="metadata">
<source src="video.mp4" type="video/mp4">
</video>
配合懒加载（Lazy Load）策略
对于页面中非首屏的视频，延迟加载可提升首屏性能。
- 初始不设置 src，用 data-src 存储真实地址
- 当视频进入视口时，再动态赋值 src 开始加载
- 可结合 Intersection Observer API 实现高效监听
使用 CDN 加速分发
将视频文件部署到 CDN（内容分发网络），用户从最近节点获取资源，大幅提升加载速度。
- 选择支持大文件加速的 CDN 服务
- 开启 HTTP/2 和 gzip 压缩（对文本有效，视频本身不压缩）
- 设置合理的缓存策略（Cache-Control）
