preload与autoplay相互影响且受环境制约：设autoplay时preload基本失效；autoplay需静音+用户交互才生效；preload="metadata"最实用，仅加载元数据；preload="none"不发请求但chrome可能探测格式；preload="auto"由浏览器决定预载量，ios常降级为metadata；js动态设置preload无效；真正影响加载效率的是poster、range请求、lazy loading及网络适配。
preload 和 autoplay 不是独立开关，而是相互影响、受环境制约的加载策略组合。设了 autoplay，preload 就基本失效；没用户交互，autoplay 在多数现代浏览器里根本不会触发播放。真正起作用的，是它们和设备、网络、用户意图共同决定的加载行为。
preload 的三个值到底在做什么
none 表示“别动这个视频”，浏览器通常连请求头都不发，但 Chrome 可能悄悄拉前几 KB 做格式探测；metadata 是最实用的选择——只取时长、尺寸、封面帧（poster）、音轨信息等，体积小、速度快，进度条和控件能立刻可用；auto 并非“全量下载”，而是把决定权交给浏览器：桌面端可能预载前 2–5 秒，iOS Safari 则直接降级为 metadata，甚至忽略。
autoplay 起效的前提比想象中苛刻
自动播放不是加个属性就完事。Chrome、Edge 等主流桌面浏览器要求视频必须静音（muted），且需用户有过至少一次页面交互（比如点击、滚动）后才允许后续自动播放；iOS Safari 完全禁止非静音 autoplay，即使加了 muted，也常因 Low Power Mode 或后台标签页被拦截；Android Chrome 对首次访问用户更保守，常需用户主动点一下才能解锁后续自动行为。
常见组合的实际效果
- preload="metadata" + controls：最稳妥的默认搭配。封面即刻显示，进度条可拖，用户点播放才开始下载主体内容，兼顾体验与节流。
- preload="none" + autoplay：无效组合。autoplay 触发时会绕过 preload 直接加载，但若未满足静音+交互条件，视频根本播不了，还白白占了连接池。
- preload="auto" + muted autoplay：仅适用于首屏核心视频（如产品页主视觉），且建议配合 IntersectionObserver 延迟加载——等视频进入视口再插入 DOM，避免初始页面堆积大量预加载请求。
- JS 动态设置 preload：无效。video.preload = "auto" 在元素已存在时不起作用，preload 只在 HTML 解析阶段生效。
比属性本身更重要的事
真正影响加载效率的，往往不在 preload 或 autoplay 上。优先做这几件事：用 poster 属性提供高质量封面图，避免空白等待；启用 range 请求（服务端返回 Accept-Ranges: bytes），让 metadata 模式能准确读取时长；对非首屏视频加 loading="lazy"；大文件考虑分片或 HLS/DASH 流式方案；监测真实用户网络类型（Save-Data 头、navigator.connection.effectiveType），动态调整 preload 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
