preload属性是浏览器加载提示而非强制指令，其实际行为因浏览器和环境而异：autoplay存在时preload失效；auto不保证全量加载；metadata最稳妥，仅获取头信息；none需手动load()触发；动态修改基本无效。
preload 属性不是开关，而是提示——浏览器有权忽略它，尤其当 autoplay 存在时，preload 直接失效。
preload="auto" 不等于全量加载，别被名字骗了
这个值只是告诉浏览器“你可以按需加载整个视频”，但实际行为由浏览器策略决定：Chrome 可能只加载前几秒，Safari 在移动端默认降级为 metadata，Firefox 会参考网络条件动态调整。它不保证下载完成，也不触发 canplaythrough 事件。
- 适合页面首屏核心视频（如产品介绍主视频），且你确认用户大概率会点播
- 不要用于大文件（>100MB）或弱网场景，否则白耗流量还卡住其他资源
- 如果同时写了
autoplay，preload="auto"完全无效——浏览器直接跳过解析该属性
preload="metadata" 是最稳妥的默认选择
它只拉取视频头信息：时长、宽高、第一帧（poster）、音轨/字幕轨道数。这部分通常不到 100KB，响应快、失败影响小，且几乎所有现代浏览器都严格遵守。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 适用于视频列表页、卡片式布局、搜索结果页等“可能看，也可能划走”的场景
- 能正常触发
loadedmetadata事件，方便你动态显示时长或封面 - 注意：某些老旧 Android WebView（如 Android 4.4）可能把
metadata当作none处理，建议加兜底逻辑
preload="none" 要配合 JS 手动触发加载
设成 none 后，video.src 赋值不会引发任何网络请求，连 DNS 查询都省了。但这也意味着你必须自己控制加载时机——比如监听 scroll 进入视口后再调用 load()。
- 必须显式调用
video.load()才会发起请求，仅改src不够 - 移动端微信内置浏览器对
load()有延迟限制，首次调用可能被静默丢弃，建议加setTimeout微调 - 如果用户点了播放但还没调用
load()，浏览器会自动 fallback 加载，但体验割裂——进度条空白、无缓冲指示
动态修改 preload 值的实际效果很有限
运行时改 video.preload = "auto" 只在视频尚未开始加载时有效；一旦已进入 loading 或 loadedmetadata 状态，再改值基本没用——浏览器不会中断当前请求或补加载剩余内容。
- 真正可控的是：在
src赋值前设置preload，或在loadstart之前修改 - 想实现懒加载，优先用 IntersectionObserver +
preload="none"+load()组合，而不是反复切preload - 服务端若支持 HTTP Range 请求，
metadata拉取通常只发一个 HEAD 或带 range 的 GET，这是它轻量的关键，别指望用它绕过 CDN 缓存策略
真正难控的从来不是 preload 的写法，而是浏览器如何解释它——同一段 HTML，在 Chrome Desktop、iOS Safari、微信安卓 WebView 里可能触发三种不同加载行为。与其押注某个值，不如用 networkState 和 readyState 做状态判断，再配合用户交互做兜底加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
