video 的 preload 属性不支持滚动预加载，仅提示浏览器加载策略；需结合 intersectionobserver 动态控制 preload 与 src，并配合 loading="lazy" 实现多视频列表滚动预加载。
Video 标签的 preload 属性本身**不支持滚动预加载逻辑**，它仅控制单个视频在页面加载时是否提前获取部分或全部媒体数据。真正实现“多视频列表滚动预加载”，需要结合 preload 的合理取值 + JavaScript 的可视区检测 + 动态资源管理，而非依赖 preload 单独完成。
理解 preload 的实际作用与限制
preload 有三个合法值：none、metadata、auto（浏览器可忽略 auto）。它不是指令而是提示，浏览器会根据网络状况、设备性能、用户设置（如“节省流量”模式）自主决策：
-
preload="none"：默认最省资源，不请求任何视频数据，适合大量视频但用户可能只看少数的场景 -
preload="metadata"：仅加载时长、尺寸、首帧等元信息，耗流量小、响应快，能支撑封面展示和播放器初始化 -
preload="auto"：提示浏览器尽可能加载视频（含部分或全部内容），但移动端常被忽略，且易造成带宽浪费和内存压力
滚动中动态控制 preload 和 src 是关键
对长视频列表（如信息流、短视频墙），应只对当前可视区域及邻近 1–2 个视口范围内的 <video></video> 元素启用加载，其余保持 preload="none" 并清空 src 或设为空字符串：
- 用
IntersectionObserver监听元素进入/离开可视区，避免频繁触发scroll事件 - 进入可视区时：设置
preload="metadata"→ 触发元信息加载 → 成功后可显示封面/时长 → 用户点击再设preload="auto"或直接调用load() - 完全移出可视区（尤其远离滚动方向）时：重置
preload="none"，并设src=""释放已加载资源（注意：设空src会中断正在加载的请求）
配合懒加载属性提升兼容性与体验
现代浏览器支持原生懒加载，可与 preload 协同使用：
- 添加
loading="lazy"属性，让浏览器延迟加载非关键视频的初始src（需配合preload="none"） - 对关键位置（如首屏前3个）可不加
loading="lazy"，但依然用preload="metadata"提前准备元信息 - 注意：Safari 15.4+、Chrome 77+ 支持
loading="lazy"for<video></video>，旧版需降级为 JS 实现
避免常见陷阱
实际开发中容易误用导致性能反效果：
- 不要给所有视频设
preload="auto"—— 尤其在低端安卓机或弱网下，大量并发请求会阻塞主资源、触发内存回收甚至崩溃 - 不要在
preload="metadata"加载完成后立刻自动播放（除非明确用户意图），这违反 autoplay 策略（需muted+playsinline且用户有交互） - 监听
loadedmetadata事件比轮询readyState更可靠；但要注意该事件只触发一次，且失败时不触发，需搭配error事件兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
