一、 视频的底层结构：容器 vs 编解码器
很多人以为 .mp4 或 .webm 就是视频的全部，但实际上它们只是"包装盒"（Container，容器）。
- 容器（Container）： 比如 MP4、WebM、MKV。它的作用是把视频轨、音频轨、字幕等打包成一个文件。
- 编解码器（Codec）： 负责真正压缩画面和声音的算法。常见的视频编解码器有 H.264 (AVC) 、VP9 、AV1。
为什么理解这个能优化性能？
因为不同的编解码器，压缩效率天差地别。
- H.264/AVC：老牌王者，100% 的浏览器都支持，但文件体积相对较大。
- VP9：Google 推出的格式，比 H.264 体积小 30%~40%，现代浏览器支持度极高。
- AV1：下一代神级编解码器，压缩率比 VP9 还要高 30% 左右，但老旧设备解码比较吃力。
FFmpeg 优化实战
文档中提到了 FFmpeg 这个大名鼎鼎的音视频处理工具：
Bash
css
# 基础转换：将 input.mov 转为 webm 容器（默认使用 VP9/VP8 编码）
ffmpeg -i input.mov output.webm
# 极致优化：去掉音频轨（-an 表示 audio none）
ffmpeg -i input.mov -an output.webm核心痛点： 很多设计师导出的"静音 GIF 替代视频"里，其实还残留着一条"无声的音频轨"。虽然没声音，但它依然占用字节。用
-an彻底拔掉音频轨，可以瞬间压榨出几百 KB 的空间。
二、 多格式备用机制：让浏览器自己选最好的
由于不是所有浏览器都支持最新的 AV1 或 VP9，我们在写 HTML 时必须做"降级处理"：
HTML
bash
<video controls>
<source src="video-av1.webm" type="video/webm; codecs=av1">
<source src="video-vp9.webm" type="video/webm; codecs=vp9">
<source src="video-h264.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频播放。
</video>致命陷阱（注意顺序）： 浏览器解析
<source>是从上往下 的，一旦发现自己能播放某一个，就会立刻下载，不再看后面的 。如果你把mp4放在第一行，那么所有支持现代格式的先进浏览器，也都会被迫下载体积臃肿的mp4。
三、 海报图片（Poster）与网页核心指标（LCP）
poster 属性用来指定视频还没播放时显示的封面图。
HTML
ini
<video poster="cover.jpg">
<source src="video.webm" type="video/webm">
</video>优化与核心网页指标（LCP）的关系
LCP（Largest Contentful Paint，最大内容绘制） 是衡量网页加载速度的重要指标（网页上最大的那块内容什么时候显示出来）。
- 过去： 浏览器不算没有 poster 的视频。
- 现在： 浏览器很聪明。如果没有设置
poster，浏览器会把视频的第一帧画面算作 LCP 的考核对象。
这意味着，如果你的视频没有封面，且加载很慢，网页的 LCP 得分就会非常难看。
-
正确做法： 务必提供一张经过极致压缩的
poster.jpg（比如转换为 WebP 或 AVIF 格式）。 -
进阶技巧： 如果这个视频在首屏（一打开就能看到），甚至可以在
<head>中预加载这张封面图：HTML
ini<link rel="preload" as="image" href="cover.jpg" fetchpriority="high">
四、 自动播放（Autoplay）与消灭动图 GIF
这是前端性能优化性价比最高的一招：用 <video> 彻底干掉动画 GIF。
一张几秒钟的高清 GIF 动图可能高达 10MB ，而同样画质的视频（WebM 格式）可能只需要 500KB。
要想让视频像 GIF 一样无缝循环播放，必须组合使用以下属性：
HTML
bash
<video autoplay muted loop playsinline>
<source src="video.webm" type="video/webm">
</video>autoplay: 自动播放。muted: 必须静音 ！现代浏览器为了防止网页突然发出声音吓到用户，严格限制非静音视频的自动播放 。不加muted，视频大概率会被浏览器拦截并静止。loop: 循环播放。playsinline: 在 iOS 等移动端浏览器上，防止视频自动进入全屏播放，而是乖乖地在网页原本的位置播放。
五、 控制下载时机：非首屏视频的延迟加载
文档中提到了控制视频下载的三种段位：
1. 基础段位：preload 属性
如果视频需要用户手动点击播放（不是自动播放），别让浏览器一进网页就下载它：
preload="none"：告诉浏览器："用户不点，你一个字节都别下载。"preload="metadata"：只下载视频的时长、尺寸等基本信息，不下载视频主体。
2. 现代段位：loading="lazy"
这是近几年浏览器刚支持的特性。给视频加上 loading="lazy"，浏览器会把视频的封面图（poster）和元数据的下载，一直推迟到用户把网页滚动到视频附近时才开始加载。
3. 王者段位：外观模式（Facade / 仿造占位符）
像 YouTube 或 Bilibili 的嵌入视频（iframe），里面带有几百 KB 甚至上 MB 的第三方 JavaScript 脚本。如果一开局就加载，会严重霸占浏览器的主线程 ，导致用户点击网页时毫无反应（破坏了 INP 指标，即与下次交互的延迟）。
破解之道（外观模式）：
- 网页初始化时，不放真的视频组件。只放一张长得一模一样的"播放器封面图"和一个假的播放按钮（纯图片+纯 HTML/CSS）。
- 当用户真正用鼠标去点击这个"假播放键"时，JavaScript 再动态把图片替换成真正的 YouTube
<iframe>或播放器。 - 这样，首屏加载时就彻底免疫了第三方视频带来的性能灾难。