preload="none"适用于用户大概率不播放、视频体积极大（如＞200mb）或流量敏感场景（如微信内嵌webview、低配android设备），它不发起任何请求，readystate长期为0，首次点击才触发下载；但需配合intersectionobserver动态调用load()避免滑动卡顿，且chrome可能对小mp4静默预读前几百kb。
preload="none" 什么时候该用
适合明确知道用户大概率不播、或视频体积极大（如 >200MB）、或页面处于流量敏感场景（如微信内嵌 WebView、低配 Android 设备）时。它不发任何请求，video.readyState 会长期为 0（HAVE_NOTHING），首次点击才触发下载。
容易踩的坑：
- 写了
preload="none"却指望能立刻显示时长或封面——不可能，元数据都未加载 - 在信息流中给所有视频设
none，但没配合IntersectionObserver动态调用load()，导致用户滑到眼前才开始拉流，体验卡顿 - 误以为
none能彻底阻止浏览器静默读取：Chrome 对小 MP4 可能仍会预读前几百 KB，用于快速响应播放
preload="metadata" 为什么最常用
它只请求 MP4 文件开头的 moov box（通常几 KB），用于获取时长、宽高、封面帧、音轨列表等，不下载画面帧或音频流。这是目前兼容性最好、副作用最小的取值。
但生效有硬前提：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 服务端必须返回
Accept-Ranges: bytes响应头，否则浏览器无法做字节范围请求，可能退化为下载前几 KB 甚至整个文件 - 视频文件必须经
ffmpeg -c copy -movflags +faststart重写，否则moov在文件末尾，浏览器得下完才能解析元数据 - 务必搭配
poster属性，避免白屏；监听loadedmetadata事件确认就绪，别信video.readyState初始值
preload="auto" 在哪些环境真有用
桌面 Chrome / Firefox 在非节电模式、内存充足时，可能预加载前 1–5 秒视频数据；但 iOS Safari 从 10 开始就无视所有 preload 值，静默降级为 none，哪怕写了 auto 也等于没写。
关键事实：
-
autoplay存在时，preload被完全忽略——不是 bug，是规范行为 - 动态 JS 设置
video.preload = "auto"无效，preload只在 HTML 解析阶段起作用 - 想“激进预加载”，得用
<link rel="preload" as="video" href="xxx.mp4">（仅同域），但它不触发解码，也不影响video元素状态
preload 生效的前提常被忽略
preload 不是运行时开关，它只对初始 HTML 中已存在的 <video></video> 元素生效。用 React/Vue 渲染、或 JS 动态插入的视频，即使模板里写了 preload="metadata"，也不会触发预加载。
真正可控的做法：
- 首屏视频用静态 HTML +
preload="metadata"+poster - 滚动列表中的视频，靠
IntersectionObserver监听进入视口后，显式调用video.load()，再监听canplay或loadeddata - 移出可视区的视频，设
src=""并重置preload="none"，释放内存和连接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
